26

我正在尝试用 5 个均匀分布的链接在 CSS 中创建一个水平导航栏。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 的空间。这个间距是从哪里来的？我怎样才能摆脱它？如果我增加字体大小，间距也会增加。

4

5 回答 5

25

我曾经发生过这种情况。不幸的是，这是由浏览器在列表项之间换行并将它们呈现为空格引起的。要修复，请将您的 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>
于 2008-11-09T19:22:36.257 回答
13

如果你使用这个：

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

一切看起来都很可爱：D

于 2008-11-09T19:17:56.937 回答
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 上很好地显示，所以您可能想尝试浮动方法。

于 2008-11-09T19:29:34.807 回答
1

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

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

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

我意识到这已经很老了，但我在 7 年后的 2015 年遇到了这个问题，所以这可能对其他人也有帮助。

于 2015-06-03T10:13:38.910 回答
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;        
}
于 2008-11-14T12:00:37.793 回答