0

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

4

3 回答 3

3

您看到的空白是由标记中的空格引起的。与浮点数不同，它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>

查看这篇 CSS 技巧文章以获得更深入的解释和其他替代修复。

Nathan Lee 的解决方案是一种选择（替换inline-block为table-cell），但您应该知道该更改还有其他后果（如果您关心这一点，则缺乏 IE7 支持，但也存在差异vertical-align等）。

如果您无法修改加价，那么负边距将达到您的要求。但是，这-4px实际上取决于使用的字体，因此可能需要略有不同。总感觉有点像黑客。查看this fiddle，了解为什么它比替代品更脆弱的一个例子。

于 2013-10-24T11:47:24.333 回答
1

这是解决方案。只需将下面的 css 替换为您的 css。

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

工作演示

希望这可以帮助。

于 2013-10-24T11:43:03.893 回答
0

尝试添加

margin-left:-4px;

给你的

ul#navbar li
于 2013-10-24T11:43:47.207 回答