Question

我正在尝试制作带有未排序列表的某种导航栏，并且列表项目中包含图形，但是当鼠标悬停在项目上时，背景颜色不会覆盖整个区域或者有一些空间在每个项目之间..

Answer 1

您在那里看到的差距是由标记中的空白引起的。与浮点数不同，inline-block实际上会尊重HTML中的空格。因此，最简单的解决方案是添加空注释或仅确保每个<li>项之间没有空格，如下所示：

<ul id="navbar">
    <li><div class="refresh"></div></li><li><div class="settings"></div></li><li><div class="s_res"></div></li><li><div class="h_res"></div></li>
</ul>

查看this CSS Tricks article以获得更深入的解释和其他替代修复。

Nathan Lee的解决方案是一个选项（将inline-block替换为table-cell）但你应该意识到这种改变会产生其他后果（如果你关心它，缺乏IE7支持，还有差异在vertical-align等。）

如果你不能修改标记，那么负边际将实现你所追求的目标。但是，-4px实际上是使用中的字体，因此可能需要略有不同。它总是感觉像是一个黑客。查看this fiddle，了解为什么它比替代品更脆弱的一个例子。

Answer 2

这是解决方案。只需用你的css替换下面的css。

ul#navbar li {
    border-right: 2px solid #FF9000;
    display: table-cell;
    margin: 0;
    padding: 14px;
}

<强> WORKING DEMO

希望这有帮助。

Answer 3

尝试添加

margin-left:-4px;

到你的

ul#navbar li

列表背景悬停未完全覆盖

3 个答案: