内联阻止列表项目之间的空格

Question

为什么内联阻止列表项中有空格？无论我如何将列表项放入菜单，我总会得到空格。

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。

为了避免这种情况，您可以将所有lis放在一行中一起运行 ，或者像这样阻塞end标记和begin标记：

 <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的可读性更好（避免同时运行标签等）。间距效果是由于字体的间距设置引起的，因此必须为内联元素重置它，并为其中的内容再次设置它。