HTML CSS examples for CSS Widget:UL Element
Splitting <li> into two groups, left and right
<html lang="en"> <head> <title>Lorem ips</title> <style> .lavalamp_left { position:relative; float:left; border:2px solid Chartreuse; background:yellow; padding:16px; -webkit-box-shadow:0 4px 7px blue;<!-- w w w. ja v a2 s.c o m--> -moz-box-shadow:0 4px 7px pink; border-radius:11px; -moz-border-radius:11px; -webkit-border-radius:11px; background:-webkit-gradient(linear, left top, left bottom, from(OrangeRed), to(rgb(205,205,205))); background:-moz-linear-gradient(top, grey, rgb(205,205,205)); height:19px; width:61%; text-alight:left; } .lavalamp_right { position:relative; border:2px solid BlueViolet; background:Chartreuse; padding:16px; -webkit-box-shadow:0 4px 7px yellow; -moz-box-shadow:0 4px 7px blue; border-radius:11px; -moz-border-radius:11px; -webkit-border-radius:11px; background:-webkit-gradient(linear, left top, left bottom, from(pink), to(rgb(205,205,205))); background:-moz-linear-gradient(top, OrangeRed, rgb(205,205,205)); height:19px; width:34%; float:left; text-align:right; } li { display:inline; padding:11px; color:grey; } a { color:BlueViolet; text-decoration:none; } </style> </head> <body translate="no"> <div class="lavalamp_left dark"> <ul> <li class="logo">Lorem ipsum</li> <li class="active"> <a href="">Lorem</a> </li> <li> <a href="">Lore</a> </li> <li> <a href="">Lorem</a> </li> </ul> <div class="floatr"></div> </div> <div class="lavalamp_right dark"> <ul> <li> <a href="">Lore</a> </li> <li> <a href="">Lorem</a> </li> <li> <a href="">Lorem </a> </li> </ul> <div class="floatr"></div> </div> </body> </html>