HTML CSS examples for CSS Widget:UL Element
keep <li> elements on single line in fixed width
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .header-menu-ul { padding:0px; min-height:201px; } .header-menu-ul li { float:left; } .header-menu {<!--from w w w . ja v a 2s.com--> margin:0px; padding:0px; list-style:none; white-space:nowrap; display:inline-block; width:151px; } .header-menu-link { font-size:26px; font-family:Calibri; padding:21px 11px 151px 11px; color:Chartreuse; display:inline-block; max-width:141px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } .menu-link1-color { background-color:yellow; } .menu-link2-color { background-color:blue; opacity:0.7; } .menu-link3-color { background-color:pink; opacity:0.7; } .menu-link4-color { background-color:OrangeRed; opacity:0.6; } .menu-link5-color { background-color:grey; opacity:0.5; } .menu-link6-color { background-color:BlueViolet; opacity:0.4; } </style> </head> <body> <div class=""> <ul class="header-menu-ul"> <li class="header-menu menu-link1-color"> <a href="" class="header-menu-link ">Lorem ipsum </a> </li> <li class="header-menu menu-link2-color"> <a href="" class="header-menu-link ">Lorem ip</a> </li> <li class="header-menu menu-link3-color"> <a href="" class="header-menu-link ">Lorem ips</a> </li> <li class="header-menu menu-link4-color"> <a href="" class="header-menu-link ">Lorem ips</a> </li> <li class="header-menu menu-link5-color"> <a href="" class="header-menu-link ">Lorem </a> </li> <li class="header-menu menu-link6-color"> <a href="" class="header-menu-link ">Lorem</a> </li> </ul> </div> </body> </html>