css水平导航间距

Posted 2023-04-13

【中文标题】css水平导航间距

【英文标题】：css horizontal navigation spacing

【发布时间】：2010-09-21 12:54:20

【问题描述】：

我正在尝试在 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 的空间。这个间距是从哪里来的？我怎样才能摆脱它？如果我增加字体大小，间距也会增加。

【参考方案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>

【讨论】：

IE 不是唯一有这种行为的吗？

这是由 display:inline 引起的标准行为。

我不记得是哪个浏览器导致了这种情况，但坦率地说，如果它发生在 MSIE 或 FF 中，那么你必须找到解决办法。至少我是这么看的。

+1 谢谢你，我想我听到了 90 年代后期的呼唤，他们希望他们的 bug 回来！

感谢这个有用的提示

【参考方案2】：

如果你使用这个：

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

一切看起来都很可爱：D

【讨论】：

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

【参考方案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 上很好地显示，因此您可能想尝试浮动方法。

【讨论】：

inline-block 从 IE5 开始工作——这是微软的发明。不过，它在 Firefox 2 中完全被破坏了。

那么，那是被破坏的内联块的那一部分！不是因为 IE 不支持它，而是因为 IE 发明了它;-)

【参考方案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>

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

【参考方案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;