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

Question

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

菜单在这里： http: //pokerzysta.site44.com/ ( Linki, Posty, Forum, Dodaj) 知道它有什么问题吗？

Answer 1

那是因为您使用 . 以水平方式显示列表display: inline-block;。在 HTML 标记中呈现的内容是空格（很可能是 li 标记后的换行符）。

如果您将 li-tags 放在没有空格和换行符的 html 中，则不会发生这种情况：

<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 撰写的一篇关于水平显示列表导航的精彩文章：http: //css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 2

您的 LI 元素之间有空格。通过删除它们或使用

float: left;

也可以解决问题（但在你的 UL 之后你应该使用 clear: both）

Answer 3

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

在你的情况下：

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

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