css horizontal navigation spacing - css

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>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</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

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>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li>
</ul>
</div>

Answer 2

If you use this:
div#footer li{
width:160px;
display:block;
float: left;
text-align:center;
}
It all looks lovely :D

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>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</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

This has been completely solved by CSS flexbox.
CSS-Tricks have an excellent writeup here, and a Codepen example using <ul> here.
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
justify-content: space-around;
}
.flex-item {
background: tomato;
padding: 5px;
margin: 0px;
line-height: 40px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
flex: 1 1 auto;
}
<ul class="flex-container">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
</ul>
I realise this is quite old, but I encountered this issue 7 years later in 2015 so this might help someone else too.

Answer 5

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;
}