内联块列表项之间的空格

Question

可能重复:
内联块列表项中的不需要的边距
如何从HTML中删除"不可见空间"

为什么内联块列表项中有空格？无论我如何将我的列表项目放入菜单,我总是得到空格.

li {
  border: 1px solid black;
  display: inline-block;
  height: 25px;
  list-style-type: none;
  text-align: center;
  width: 50px;
}
ul {
  padding: 0;
}

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

Answer 1

我见过这个并在之前回答过:

经过进一步的研究,我发现这inline-block是一个依赖于空格的方法,并且依赖于字体设置.在这种情况下,渲染4px.

为了避免这种情况,您可以li在一行中将所有s一起运行 ,或者阻止结束标记并像这样一起开始标记:

<ul>
        <li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li>
</ul>

这里的例子.

正如其他答案和评论所述,解决此问题的最佳做法是添加font-size: 0;到父元素:

ul {
    font-size: 0;
}

ul li {
    font-size: 14px;
    display: inline-block;
}

这对HTML可读性更好(避免一起运行标记等).间距效果是由于字体的间距设置,因此您必须为内联元素重置它并为其中的内容重新设置它.

Answer 2

解:

ul {
    font-size: 0;
}

ul li {
    font-size: 14px;
    display: inline-block;
}

您必须将父字体大小设置为0

Answer 3

我将添加float左侧的CSS属性,如下所示.这摆脱了额外的空间.

ul li {
    float:left;
}

Answer 4

实际上,这不是特定的display:inline-block,但也适用于display:inline.因此,除了DavidHorák的解决方案之外,这也有效:

ul {
    font-size: 0;
}
ul li {
    font-size: 14px;
    display: inline;
}

Answer 5

另一个解决方案,类似于Gerbus的解决方案,但这也适用于相对字体大小调整.

ul {
    letter-spacing: -1em; /* Effectively collapses white-space */
}
ul li {
    display: inline;
    letter-spacing: normal; /* Reset letter-spacing to normal value */
}