1

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

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

4

3 回答 3

3

那是因为您使用 . 以水平方式显示列表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/

于 2013-02-05T12:55:47.277 回答
1

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

float: left;

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

于 2013-02-05T13:01:11.407 回答
1

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

在你的情况下:

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

.horizontal-list li{
   font-size: 17px;
}
于 2013-02-05T13:05:57.837 回答