Question

我正在尝试使用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;
}

这很好用，但我不想要的李之间有间距。这就是为什么我使用155px而不是160px的宽度，每个li之间有大约5px的空间。间距来自哪里？我怎么能摆脱它？如果我增加fontsize，间距也会增加。

Answer 1

我发生了这件事。不幸的是，它是由浏览器在列表项之间进行换行并将它们呈现为空格引起的。要解决此问题，请将您的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>

Answer 2

如果您使用此：

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

一切看起来很可爱：D

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

你会发现它们之间没有更多的空间。

我不确定内联块是否会在IE6上很好地显示，所以你可能想尝试浮点法。

Answer 4

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

CSS-Tricks具有出色的写入here，以及使用<ul> here的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年后遇到了这个问题，所以这也可能有助于其他人。

Answer 5

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

css水平导航间距

5 个答案: