列出项目边距

Question

我有以下CSS

ul {
    list-style-type: none;
}

li {
    padding: 0px 10px;
    padding-top: 11px;
    min-height: 38px;
    display: -moz-inline-stack;
    display: inline-block;
    font-size: 10px;
    text-transform: uppercase;
    color: #fff;
    vertical-align:middle;
    cursor:pointer;
    zoom: 1;
    *display: inline;
    _height: 38px;
}

li:hover {
    background: rgb(255, 255, 255);
    background: rgba(255, 255, 255, .18);
}

但是当我将鼠标悬停在列表项目上时，每个6像素项目之间似乎存在间隙，如图所示。我知道它是6像素，因为如果我添加margin-right: -6px;，那么差距就会消失。我不希望首先出现这种差距，我不介意使用margin-right: -6px;，但我不想使用这种黑客。

我的问题如下： 这是列表项的正常行为，还是我在某处遗漏了什么？

此致 Crouz

Answer 1

因为您使用了display:inline-block而不是float:left。这就是inline-block行为的方式，另一种解决方案是摆脱HTML中li标记之间的空格。

Answer 2

如果没有看到您的HTML，我只能假设此问题是由inline-block li元素之间的空格（或新行）引起的。删除此空间的最简单方法是将ul font-size设为0，并将li设置为包含所需的font-size。这将有效地隐藏空间。

ul {
    font-size: 0;
}

li {
    font-size: 14px;
}

理想情况下，我建议您使用表格布局：

ul {
    display: table;
}

li {
    display: table-cell;
}

Answer 3

这是正常行为。请参阅：display: inline-block extra margin

我首选的解决方案是使用float：left

Answer 4

这是inline-block的正常行为。如果您希望使用inline-block将font-size:0添加到父ul。

ul {
  font-size:0;
}

DEMO