我正在创建简单的水平菜单。当我悬停项目时,它会改变背景颜色,但在链接左侧留下一些奇怪的 3px 空间,我无法确定它出现的原因以及如何删除它。
菜单在这里: http: //pokerzysta.site44.com/ ( Linki, Posty, Forum, Dodaj
) 知道它有什么问题吗?
我正在创建简单的水平菜单。当我悬停项目时,它会改变背景颜色,但在链接左侧留下一些奇怪的 3px 空间,我无法确定它出现的原因以及如何删除它。
菜单在这里: http: //pokerzysta.site44.com/ ( Linki, Posty, Forum, Dodaj
) 知道它有什么问题吗?
那是因为您使用 . 以水平方式显示列表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/
您的 LI 元素之间有空格。通过删除它们或使用
float: left;
也可以解决问题(但在你的 UL 之后你应该使用 clear: both)
您的链接是内联块,因此 HTML 空白实际上使用空间;)一个简单的技巧是将 ul 上的字体大小设置为 0 并在 li 中重置正确的字体大小
在你的情况下:
.horizontal-list {
font-size: 0;
}
.horizontal-list li{
font-size: 17px;
}