html - How can i get all list items to be a equal width? -
i want navigation bar equal width each ul
element. tried width:100%
ul.navbar a
, ul.navbar li
. jsfiddle: http://jsfiddle.net/heyitsprodigy/a2zvr/
css:
@charset "utf-8"; /* elements */ body { margin:0; padding:0; background-image:url(main%20bg.jpg) } ul { padding:0; margin:0; } /* end of elements */ /* id's */ #container { margin-left:auto; margin-right:auto; width:1000px; } #body { border:5px solid #cf0; width:1000px; height:1000px; background-image:url(middle%20bg.png); } #navbar { position:relative; top:12px; text-align:center } /* end of is's */ /* classes */ .navbar { list-style:none; } ul.navbar li { display:inline; margin:0; padding:0px; text-align:center; } ul.navbar { background-color:#00ccff; padding:10px; margin:0px; text-decoration:none; color:#cf0; border-radius:100px; border:2px solid white; } ul.navbar a:hover { background-color:#00ffff; padding:10px; margin:0px; } /* end of classes */
html:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="style.css" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>home</title> <script> <!-- //--> </script> </head> <body> <div id="container"> <div id="body"> <div id="navbar"> <ul class="navbar"> <li><a href="index.html">blog</a></li><li><a href="index.html">photos</a></li><li><a href="index.html">home</a></li><li><a href="index.html">videos</a></li><li><a href="index.html">about</a></li> </ul> </div> </div> </div> </body> </html>
set inner anchors as
ul.navbar { display: inline-block; width: 80px; }
set width long enough content.
Comments
Post a Comment