HTML CSS examples for CSS Widget:UL Element
List <li> inside a fixed width UL
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #container {<!-- ww w .j a v a2s . com--> width:451px; background-color:Chartreuse; float:left; } ul#my-tags { float:left; width:201px; } #my-tags li { margin-right:6px; padding:0px 6px; background-color:yellow; list-style-type:none; -moz-border-radius:4px; -webkit-border-radius:4px; float:left; padding-bottom:7px; } ul#my-tags li a { color:blue; letter-spacing:2px; text-transform:uppercase; font-family:Helvetica,Arial,sans-serif; font-size:11px; display:block; line-height:2.9em; } ul#my-tags li a:hover { color:pink; text-decoration:none; padding-bottom:0; border-bottom:none; } </style> </head> <body> <div id="container"> <ul id="my-tags"> <li class="cute-tag"> <a rel="tag" href="#">Lorem ipsum </a> </li> <li class="cute-tag"> <a rel="tag" href="#">Lorem i</a> </li> <li class="cute-tag"> <a rel="tag" href="#">Lorem ipsum dolo</a> </li> <li class="cute-tag"> <a rel="tag" href="#">Lorem ipsum d</a> </li> <li class="cute-tag"> <a rel="tag" href="#">Lorem ipsum</a> </li> <li class="cute-tag"> <a rel="tag" href="#">Lorem ipsum</a> </li> <li class="cute-tag"> <a rel="tag" href="#">Lorem ipsum </a> </li> <li class="cute-tag"> <a rel="tag" href="#">Lorem ipsum dolor </a> </li> </ul> </div> </body> </html>