HTML CSS examples for CSS Widget:UL Element
Using css to set width of <li> with content
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> ol.nlist<!--from www . j a v a 2s . co m--> { counter-reset:li; padding:11px; display:table; table-layout:fixed; } ol.nlist li { position:relative; margin:0 0 0px 3em; padding:5px 9px; list-style:none; border-top:3px solid Chartreuse; background:yellow; } ol.nlist li:before { content:counter(li); counter-increment:li; position:absolute; top:-3px; left:-3em; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; width:3em; margin-right:9px; padding:5px; height:31px; border-top:3px solid blue; color:pink; background:OrangeRed; font-weight:bold; font-family:"Helvetica Neue", Arial, sans-serif; text-align:center; } li.nlist ol, li.nlist ul { margin-top:7px; width:100%; } ol.nlist ol li:last-child { margin-bottom:0; } .ac { text-decoration:none; color:grey; } </style> </head> <body> <ol class="nlist"> <li> <a class="ac" href="#1">Lorem ipsum dol</a> </li> <li> <a class="ac" href="#2">Lorem ipsum dolor sit amet, </a> </li> <li> <a class="ac" href="#3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mo</a> </li> </ol> </body> </html>