CSS水平导航间距

Question

CSS水平导航间距

27

我正在尝试使用CSS创建一个带有5个等间距链接的水平导航栏。希望HTML保持不变：

<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中均匀地排列它们。到目前为止，我正在使用以下代码：

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的空间。那个空格是从哪里来的？如何去除它？如果我增加字体大小，那么空格也会增加。

- MacRae

5个回答

13

如果你使用这个：

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

一切看起来都很可爱 :D

- mercutio

2

我建议添加 #footer {overflow:hidden} 以便轻松清除浮动（它实际上不会隐藏任何内容）。 - Kornel

3

你的<li>元素之间的空格是由于它们之间的空格和回车符号，这是由于内联样式造成的。如果你写成：

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

你将不再看到它们之间有空白。

我不确定 inline-block 在 IE6 上是否能正常显示，因此您可能需要尝试使用浮动布局的方法。

- vincent

inline-block在IE5中就可以使用了，这是微软的发明。但是在Firefox 2中完全无法正常工作。 - Kornel

所以，这就是inline-block的问题所在！不是因为IE不支持它，而是因为IE发明了它;-) - vincent

1

这个问题已经完全被CSS flexbox解决了。

CSS-Tricks在这里有一篇优秀的文章，还有一个使用<ul>的Codepen示例这里。

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

我知道这篇文章很旧，但是在2015年，7年之后，我也遇到了这个问题，希望我的经验能够帮助到其他人。

- JeremyTM

0

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

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

这段代码将li水平放置，同时在它们之间添加了空格。如果你想在li元素之间添加空间：

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

-

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andrew G. Johnson · Accepted Answer

我也遇到过这个问题。不幸的是，这是由于浏览器将列表项之间的换行符解释为空格而引起的。要修复此问题，请更改您的HTML代码如下：

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