Question

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

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

每个孩子的宽度设置为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，

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

请参阅更新的小提琴：http://jsfiddle.net/5d884606/1/

Answer 2

这是因为display: inline-block;元素会获得额外的＆＃39;当父元素上的font-size设置高于0时设置边距。将父项的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：以百分比形式混淆元素的宽度

3 个答案: