css水平导航间距 [英] css horizontal navigation spacing

问题描述

我试图在css中创建一个水平导航栏，有5个均匀间隔的链接。 html希望将保持如下：

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>

因此，使用CSS，我想在页脚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;
}

这个效果非常好，但是li之间有间距想。这就是为什么我使用155px而不是160px的宽度，每个li之间有大约5px的空间。这个间距从哪里来？如何摆脱它？如果我增加fontsize，间距也增加。

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.

推荐答案

我遇到过这种情况。不幸的是，它是由浏览器在列表项之间的换行符并将它们呈现为空格引起的。要修复此问题，请将HTML更改为：

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>

这篇关于css水平导航间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！