html - LI 之间不需要的空格

Question

我有一个 UL 和 LI 在网站上创建主导航，发生的事情是每个 LI 之间有一个空间，我找不到这个空间/差距的任何原因，我知道这个区域在关闭和打开 LI 的问题之间，我已经尝试将 LI 更改为 </li><li>对于每个没有成功的列表项。

我已经搜索过堆栈，但 LI 间距问题都没有解决我的问题。

这发生在 Firefox 和其他浏览器上，这有点奇怪，因为我真的只习惯于在 IE 浏览器(即早期版本)上看到 LI 布局问题。

我在下面概述了我正在使用的代码，非常感谢任何帮助或建议。

HTML:

<ul class="nav">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
</ul>

CSS:

ul.nav {
    height: 40px;
    margin: 0px;
    padding: 0px;
    list-style: none;
    background: #555555;
}
ul.nav li {
    color: #FFFFFF;
    display: inline;
}
ul.nav li a {
    padding: 8px 10px 8px 10px;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
}
ul.nav li a:hover {
    background: #660000;
    text-decoration: none;
}

Answer 1

在尝试了很多建议修复 HTML 标签空白问题的不同方法之后，Why is there an unexplainable gap between these inline-block div elements?是唯一可以提供帮助的主题，它详细介绍了使用 DIV 标签的空白问题，对于使用 UL/LI 的修复，我在我的实例中发现了下面唯一的解决方案。

方法一选项在这种情况下都不起作用，唯一可行的方法是方法二“重置字体大小”，将 font-size: 0; 添加到 UL.

ul.nav {
    height: 40px;
    margin: 0px;
    padding: 0px;
    font-size: 0;
    list-style: none;
    background: #555555;
}