css horizontal navigation spacing

Question

I'm trying to create a horizontal navigation bar in css with 5 evenly spaced links. The html hopefully will remain like this:

<div id="footer">
 <ul>
  <li><a href="one.html">One</a></li>
  <li><a href="two.html">Two</a></li>
  <li><a href="three.html">Three</a></li>
  <li><a href="four.html">Four</a></li>
  <li><a href="five.html">Five</a></li>
 </ul>
</div>

So with CSS, I want to space them evenly within the footer div. So far I'm using this:

div#footer{
 height:1.5em;
 background-color:green;
 clear:both;
 padding-top:.5em;
 font-size:1.5em;
 width:800px;
}
div#footer ul{
 margin:0;
 padding:0;
 list-style:none;
}
div#footer li{
 width:155px;
 display:inline-block;
 text-align:center;
}

This works pretty well, but there is spacing between the li's that I do not want. That is why I've used the 155px instead of 160px for their width, there is about 5px of space being put in between each li. Where is that spacing coming from? How can I get rid of it? If I increase the fontsize, the spacing increases as well.

Answer 1

If you use this:

div#footer li{
  width:160px;
  display:block;
  float: left;
  text-align:center;
}

It all looks lovely :D

Answer 2

I've had this happen to me. Unfortunately it is caused by the browser taking the line breaks between the list items and rendering them as spaces. To fix, change your HTML to:

<div id="footer">
  <ul>
    <li><a href="one.html">One</a></li><li><a href="two.html">Two</a></li><li><a href="three.html">Three</a></li><li><a href="four.html">Four</a></li><li><a href="five.html">Five</a></li>
  </ul>
</div>

Answer 3

The spaces between your <li> elements are due to the whitespaces and carriage returns between them, due to the inline style. If you write :

<li><a href="one.html">One</a></li><li><a href="two.html">Two</a></li><li><a href="three.html">Three</a></li><li><a href="four.html">Four</a></li><li><a href="five.html">Five</a></li>

You'll see no more space between them.

I'm not sure if inline-block's will display nicely on IE6, so you may want to try the float approach.

Answer 4

div#footer ul{ margin:0; padding:0; list-style:none; }

div#footer li{ width:155px; float:left; display:block;
}

This code positioned li horizontally while the spaces between them. If you want to adding space between li elements:

div#footer li{ width:155px; margin-right: 5px; //5px Space between li elements float:left; display:block;
}