HTML CSS examples for CSS Widget:UL Element
Dynamically filling ul
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!-- w ww . jav a2 s .c om--> padding:0; margin:0; } .m_wrapper { background-color:Chartreuse; position:relative; width:100%; display:block; padding:0; margin:0px 0px 11px 0px; } .menu * { position:relative; } .m_wrapper ul { background-color:yellow; position:relative; width:71%; margin:0 auto; display:table; height:21px; padding:0; list-style-type:none; } .m_wrapper li { position:relative; width:26%; box-sizing:border-box; float:left; padding:6px 0px 6px 6px; border:2px solid blue; height:31px; } #cont { background-color:pink; width:71%; height:auto; margin:0px auto; padding:6px; display:table; } #foot { background-color:OrangeRed; width:100%; height:auto; position:relative; margin:11px 0px 0px 0px; } #foot table { width:71%; margin:0px auto; border:2px solid grey; } #foot table td { border:2px solid BlueViolet; } </style> </head> <body> <div class="m_wrapper"> <ul class="menu"> <li class="dropdown">Lorem </li> <li class="dropdown">Lorem </li> <li class="dropdown">Lorem </li> <li class="dropdown">Lorem </li> </ul> </div> <table id="cont"> <tbody> <tr> <td>Lorem i</td> </tr> </tbody> </table> </body> </html>