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

题 如果两者都< li>是50％,他们为什么不能并排？ 码 Demo在jsfiddle上. HTML <ul> <li>left</li> <li>right</li><

... . . 题

如果两者都< 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,0.83);}

.

解决方法

. 因为默认情况下,边距填充和边框计算在元素外部而不是内部.因此,1px的3px边框的填充将被添加到所有边的50％.

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

* {   margin: 0;   padding: 0;}

或者,如果您想以宽松的方式重置,则可以使用CSS Reset Stylesheet

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

你也使用内联块,只要4px就可以留下一个边距/空格,所以将所有的li放在一行中.或者您可以做的是,您可以将左边的元素添加到float,这样您就不必在源文档的一行中创建所有li.

Demo

如果您使用浮动解决方案,请确保清除浮动元素.

. . .. ...