为什么50％的2个元素不适合同一行

Question

问题

如果<li>都是50%，为什么他们不能并排？

代码

Demo关于jsfiddle。

HTML

<ul>
    <li>left</li>
    <li>right</li>
</ul>

CSS

ul {
    padding: 0;
}
li {
    list-style: none;
    display: inline-block;
    width: 50%;
    font-size: 12px;
    color: gray;
    background-color: rgb(216, 216, 216);
    padding: 3px;
    text-align: center;
    border: 1px solid rgba(179, 179, 179, 0.83);
}

Answer 1

因为默认情况下，margin padding和border计算在元素之外而不是在内部。因此，padding的{​​{1}} + 3px border将被1px添加到所有方面50%。

此外，我不确定您是否正在重置浏览器默认margin和padding元素，如果您不是这样做的话。你可以使用一些反对的通用选择器，因为它可以通过几位来达到性能，比如

* {
   margin: 0;
   padding: 0;
}

或者，如果您想以宽松的方式重置，请使用CSS Reset Stylesheet

因此，为了计算内部的padding和border，您必须使用值为box-sizing的{​​{1}}属性。

此外，您正在使用border-box，只会inline-block只留下margin /空白，因此请将所有4px放在一行中。或者您可以做的是，您可以将float元素li添加到left，这样您就不必在源文档的一行中创建所有li。

Demo

---

如果您要使用clear解决方案，请确保float您的浮动元素。

Answer 2

第一个问题：使用display:inline-block属性，有white-space个元素。这会使li元素100％+ white-space超过100％，因此无法在同一行上使用float:left来解决您的问题

第二个问题：您提供3px边框，使li元素宽度超过50％，您可以使用属性box-sizing:border-box;，这会使您的边框位于{ {1}}元素

CSS：

li

JSFIDDLE

Answer 3

这是因为<li>元素有填充。您必须删除填充或减小宽度。

例如，

width: 48%; 
padding: 2%

Answer 4

这是因为填充。洗涤元素为50％+ 3px宽。

Answer 5

看起来这是一个简单的问题

看起来你想要填充

每<li> 3px你有2，那么你需要6px额外 并且你有1px的扩展（每个li有2个边框），这意味着你有4px的附加功能。

这意味着你需要额外10 px

您只需更改此行

即可

width: calc(50% - 10px);

实施例 http://jsfiddle.net/L5DbR/14/

Answer 6

正如其他人所说display: inline-block;在块之间增加了空间。

ul {
    padding: 0;
    font-size: 0; /*This is a hack for inline-block to not add space between blocks*/
}

以上代码是使<li>元素之间的“空间”变为零的黑客攻击。来源：CSS技巧 - https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Demo