css - 50% 宽度的边框不能放入一行

Question

我为设置li了元素width: 50%，以便将ul块分成两li行，如下图所示。例如，这里是带有normalize.css的JS bin。

李的安排很好 [图片1]

但是，宽度li需要小于 50%，例如 49.6% 或更小。如果不是，即使我将liand设置为.libox-sizing: border-boxmargin: 0li

li的安排不好 [图2]

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

PS：我的浏览器使用的是 Chrome，如果在 Safari 上，49.5% 没问题。

score 1 · Accepted Answer

不看代码很难知道，但我认为问题在于不同行上的 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>

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

1 回答 1