CSS:Confuse 关于元素的宽度百分比

Question

假设我有一个没有特定宽度的 parent 元素，它有四个 children 元素：

<div>
    <a href>A</a>
    <a href>B</a>
    <a href>C</a>
    <a href>D</a>
</div>

每个 child 的宽度设置为 width:25%;

div {
    margin:0 auto;
    max-width: 880px;
}
a {
    display:inline-block;
    width: 25%;
}

但是，最后一个元素 D 总是自动换行，http://jsfiddle.net/5d884606/

但我认为它们应该保持在同一行并且具有相同的宽度。为什么会这样？

Answer 1

是因为inline-block加了一个4px margin,

因此，如果您将宽度更改为 24%，而不是 25%，它们将全部在同一行上。

查看更新 fiddle：http://jsfiddle.net/5d884606/1/

Answer 2

这是因为当你在高于0的父元素上设置font-size时，具有display: inline-block;的元素将获得'extra'边距。设置font-size的0 的父元素，然后按照您希望的方式在子元素上将其设置回

div {
    margin:0 auto;
    max-width: 880px;
    font-size: 0;
}
a {
    display:inline-block;
    width: 25%;
    font-size: 16px;
}

示例： http://jsfiddle.net/skeurentjes/5d884606/2/

Answer 3

这样试试：Demo

CSS:

div {
    margin:0 auto;
    max-width: 880px;
    background-color:#ccc;
}
a {
    display:block;
    float:left;
    width: 25%;
    background-color:#f00;
}

CSS:Confuse 关于元素的宽度百分比

CSS:Confuse about element's width in percentage

css

width