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-Elements之间有空格。删除它们或使用

float: left;

也会解决问题（但在您的UL之后，您应该使用明确的：两者）

Answer 3

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

在你的情况下：

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

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

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

3 个答案: