css horizontal navigation spacing

问题:

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.

回答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><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>

回答2:

If you use this:

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

It all looks lovely :D

回答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.

回答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.

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