内联块列表项之间的空格

小编典典

内联块列表项之间的空格

all

为什么inline-block列表项中有空格？无论我如何将列表项放入菜单，我总是会得到空格。

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>

阅读 78

2022-09-02

共1个答案

小编典典

我以前看过这个并回答过：

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

为避免这种情况，您可以将所有 lis 一起运行在一行中，或者像这样阻止结束标签和开始标签：

<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 可读性更好（避免将标签一起运行等）。间距效果是因为字体的间距设置，所以你必须为内联元素重新设置它，并为里面的内容重新设置它。

2022-09-02