内联块元素列表中的换行符，即使没有html空格和box-sizing：border-box

Question

小提琴：http://jsfiddle.net/t5EXL/

HTML

<ol><li>$100</li><li>$200</li><li>$500</li><li>Other</li></ol>

CSS

ol { list-style-type:none;margin:0;padding:0;}
ol li { 
    width:25%;
    text-align:center;
    background:pink;
    padding:20px;
    margin: 0 5px;
    display:inline-block;
    box-sizing:border-box;
}

输出

问题

为什么500美元后会出现换行？如何在保留width:25%指令的同时摆脱它？

Answer 1

1. 不要关闭列表项标签，​​它们会自动关闭。这将删除您可能放在那里的任何空格。

2. 使用box-sizing：border-box，以便填充和边框不会影响列表项的宽度。

3. list-items上的margin属性导致换行符。如果列表项之间需要白色，请使用白色边框。这是一种欺骗，但它确实有效。

http://jsfiddle.net/t5EXL/13/

HTML

<ol>
    <li>$100
    <li>$200
    <li>$500
    <li>Other
</ol>

CSS

ol {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ol li {
    display: inline-block;
    background: pink;
    text-align: center;
    width: 25%;
    box-sizing: border-box;
    padding: 20px;
    border: 5px solid white;
}

Answer 2

  

为什么在500美元之后会出现换行？

因为，你所有的li都是总宽度的25％，然后在它上面添加了margin = 5px，总宽度为：100％（25x4）+ 20px（5x4） 。超过总宽度：100％。

  

如何摆脱它，同时仍然保留宽度：25％指令？

将margin减少为0 :) 改为添加边框。

Answer 3

有一个休息因为4次25％加上任何正数量超过100％，所以这些方框不适合在同一条线上。您已在其上设置了正水平边距，即使使用box-sizing : border-box，边距也不会包含在元素的宽度中。

所以你的要求是自相矛盾的，你需要改变它们。