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

Question

fiddle :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. 列表项的边距属性导致换行。如果列表项之间需要白色，请使用白色边框。这有点作弊，但确实有效。

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;
}