Html 无法识别水平菜单中链接之间的奇怪空格

我正在创建简单的水平菜单。当我将项目悬停时，它会改变背景颜色，但在链接的左侧会留下一些奇怪的3px空间，我无法确定它出现的原因以及如何删除它

菜单在这里：（

Linki、Posty、Forum、Dodaj

）

---

知道有什么问题吗？

这是因为您使用

display:inline block以水平方式显示列表。
HTML标记中有空格（最有可能在li标记后换行）

如果在html中放置li标记时没有空格和换行符，则不会发生这种情况：

<ul id="main-menu" class="horizontal-list fleft">
    <li><a href="#">Linki</a></li><li><a href="#">Posty</a></li><li><a href="#">Forum</a></li><li><a href="#">Dodaj</a><li>
</ul>




@cimmanon提到Chris Coyier关于水平显示列表导航的一篇优秀文章：
这是因为您使用
display:inline block以水平方式显示列表。
HTML标记中有空格（最有可能在li标记后换行）

如果在html中放置li标记时没有空格和换行符，则不会发生这种情况：

<ul id="main-menu" class="horizontal-list fleft">
    <li><a href="#">Linki</a></li><li><a href="#">Posty</a></li><li><a href="#">Forum</a></li><li><a href="#">Dodaj</a><li>
</ul>




@cimmanon提到了Chris Coyier关于水平显示列表导航的一篇优秀文章：
LI元素之间有空格。通过移除它们或使用

float: left;

也将解决问题（但在您的UL之后，您应该使用clear:both）
在您的LI元素之间存在空白。通过移除它们或使用

float: left;

也可以解决这个问题（但是在你的UL之后，你应该使用clear:both）
你的链接是内联块，因此HTML空白实际上使用空格；）一个简单的技巧是在ul上将字体大小设置为0，在li上重置正确的字体大小

就你而言：

.horizontal-list {
   font-size: 0;
}

.horizontal-list li{
   font-size: 17px;
}

链接是内联块，因此HTML空白实际上使用空格；）一个简单的技巧是在ul上将字体大小设置为0，在li上重置正确的字体大小

就你而言：

.horizontal-list {
   font-size: 0;
}

.horizontal-list li{
   font-size: 17px;
}

另请参阅：本文的评论非常好，并提供了有关此主题的更多信息。我将你的链接编辑到我的答案中，这样更容易注意到。另请参见：本文的评论非常好，并提供了有关此主题的更多信息。我将您的链接编辑到我的答案中，这样会更容易注意到。使用此HTML代码
工作演示：使用此HTML代码