HTML CSS examples for CSS Widget:UL Element
Set a fixed width to each LI element
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .subnav {<!--from w w w . ja v a 2 s.c o m--> margin:21px auto; } .subnav ul { float:left; } .subnav li { display:block; cursor:pointer; position:relative; float:left; padding:6px 9px 0; border-top:2px solid Chartreuse; border-left:2px solid yellow; border-right:2px solid blue; } .subnav li.last-link { margin-right:0; } .subnav li div.title { font-family:'Cuprum', sans-serif; font-size:16px; font-weight:501; text-align:center; margin-top:6px; color:pink; } .subnav li div.image { background-repeat:no-repeat; overflow:hidden; margin:0 auto; background-position:center center; height:61px; } .subnav li.apparel div.image { background-image:url('https://www.java2s.com/style/demo/Google-Chrome.png'); width:59px; } .subnav li.pads div.image { background-image:url('https://www.java2s.com/style/demo/Google-Chrome.png'); width:51px; } .subnav li.gloves div.image { background-image:url('https://www.java2s.com/style/demo/Google-Chrome.png'); width:34px; } .subnav li.accessories div.image { background-image:url('https://www.java2s.com/style/demo/Google-Chrome.png'); width:51px; } .subnav li.protective div.image { background-image:url('https://www.java2s.com/style/demo/Google-Chrome.png'); width:65px; } .subnav li.cleats div.image { background-image:url('https://www.java2s.com/style/demo/Google-Chrome.png'); width:65px; } .subnav li.accessories div.image { background-image:url('https://www.java2s.com/style/demo/Google-Chrome.png'); width:48px; } .subnav li.footballs div.image { background-image:url('https://www.java2s.com/style/demo/Google-Chrome.png'); width:56px; } .subnav li.sport div.image { background-image:url('https://www.java2s.com/style/demo/Google-Chrome.png'); width:59px; } .subnav li.hydration div.image { background-image:url('https://www.java2s.com/style/demo/Google-Chrome.png'); width:23px; } .subnav li.performance div.image { background-image:url('https://www.java2s.com/style/demo/Google-Chrome.png'); width:89px; } body { background:OrangeRed; } .subnav ul li { text-align:center } .image { background:red; margin:0 auto; *margin:0 !important; } </style> </head> <body> <div class="subnav"> <ul> <li class="apparel"> <a href="apparel.html"> <div class="image"></div> <div class="title"> Lorem ips </div> </a> </li> <li class="pads"> <a href="pads-girdles.html"> <div class="image"></div> <div class="title"> Lorem ipsum do </div> </a> </li> </ul> </div> </body> </html>