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.

http://jsfiddle.net/vrfx7/1/


Comments

Popular posts from this blog

image - ClassNotFoundException when add a prebuilt apk into system.img in android -

I need to import mysql 5.1 to 5.5? -

Java, Hibernate, MySQL - store UTC date-time -