css - 列表项边距

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; 但我宁愿不必使用这种 hack。

我的问题如下: 这是列表项的正常行为，还是我遗漏了什么地方？

问候 克鲁兹

Answer 1

这是 inline-block 的正常行为。如果您更喜欢使用 inline-block，请将 font-size:0 添加到父级 ul。

ul {
  font-size:0;
}

DEMO