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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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>

回答：

我已经看到并回答了：

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

以上是 内联阻止列表项目之间的空格 的全部内容， 来源链接： utcz.com/qa/400644.html

回到顶部