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

Question

题

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

码

在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的3px+ border的1px将被添加到50%所有的方面.

如果您不是这样做,我也不确定您是否正在重置浏览器默认值margin和padding元素.您可以使用一些反对的通用选择器,因为它可以通过几个位来达到性能,例如

* {
   margin: 0;
   padding: 0;
}

或者,如果要以宽松的方式重置,则可以使用CSS重置样式表

因此,为了计算内部padding和border内部,您必须使用box-sizing值为的属性border-box.

你正在使用inline-block它会留下margin你想要的任何内容/空白只是4px为了使所有的li一行.或者您可以做的是,您可以使用float您的元素left,这样您就不必li在源文档中创建所有元素.

演示

clear如果您正在使用该float解决方案,请确保您的浮动元素.