css - 宽度为 50% 的边框框无法放入一行

<分区>

我为 width: 50% 设置了 li 元素，以便将 ul block 分成两个 li 在一行中，如下图所示。这是 JS bin例如，使用 normalize.css。

nice arrangement of li [图1]

但是，li 的宽度需要小于 50%，例如 49.6% 或更少。如果不是，即使我设置了 box-sizing: border-box，但由于未知原因，li 和 li 之间出现了一些空间margin: 0 用于 li。

bad arrangement of li [图2]

我知道我可以使用 float: left 使它像第一张图片一样工作，但我想知道为什么图片 2 中存在空间。

P.S.:我的浏览器使用 Chrome，如果在 Safari 上，49.5% 没问题。

最佳答案

不看代码很难知道，但我认为问题在于li 不同行上的元素将在它们之间显示空格。空格通常不会对 HTML 产生影响，但对于 li 元素之间的空格，它会产生影响。所以下面会显示空格

<ul> 
    <li style="display: inline;">1</li> 
    <li style="display: inline;">2</li> 
    <li style="display: inline;">3</li> 
</ul>

但是这个不会。

<ul> 
    <li style="display: inline;">1</li><li style="display: inline;">2</li><li style="display: inline;">3</li> 
</ul>

这是一个用于演示的codepen。如果您无法修改原始 html，请尝试添加负边距。

关于css - 宽度为 50% 的边框框无法放入一行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31143036/

相关文章：

html 定位 - 文本与其他文本重叠