Question

如果将四个25％宽度的内联块div放入容器div中 - 最后一个总是在下一行结束。如果将宽度设置为24％ - div将按预期保持一致。我测试了最新的Chrome

<div id="c">
    <div class="i">hello
    </div>
    <div class="i">i
    </div>
    <div class="i">love
    </div>
    <div class="i">u
    </div>
</div>

#c{
    background-color:purple;
    height:30px;
    padding:10px;
}
.i{
    border:1px solid white;
    display:inline-block;
    height:20px;
    width:25%;
}

为什么呢？他们之间的差距（谁做了这个保证金？）是原因吗？

Answer 1

您想要添加：

box-sizing: border-box;
-moz-box-sizing: border-box;

默认情况下，大多数浏览器都会width和height引用块的“内容”，即没有填充或边框。所以当你说width: 25%时，这意味着总宽度实际上是25％+填充+边界。

此外，您需要删除div末尾和另一个div的开头之间的空白区域，因为它会在它们之间增加空间。

Answer 2

由于inline-block被视为inline元素（被视为简单文字中的文字），因此whitespace或line break之间的连续inline-block或html inline-block标记中的border元素将被视为单个空格。

您可以删除标记中的换行符，以删除{{1}}元素之间的空格。

在您的情况下，{{1}}也会增加元素的有效大小。您可以通过应用default box model属性更改box-sizing的此行为。

Demo

Answer 3

要继续使用Tilwin的想法，您可以看到here几种删除间距的技巧，我使用了“父font-size:0子重写字体”技术，您可以看到更新版本{{3 }}

Answer 4

将边框添加到总宽度：

.i{
    border:1px solid white;// <--This is your issue
    display:inline-block;
    height:20px;
    width:25%;
}

您可以嵌套div来解决此问题：

<div id="c">
    <div class="i"><div>hello</div>
    </div>
    <div class="i"><div>i</div>
    </div>
</div>

.i{

        display:inline-block;
        height:20px;
        width:25%;
}
.i div {
     border:1px solid white;
}

另外，正如其他人所指出的那样，内联元素中的空格也会影响布局。也许最好的选择是抛弃内联块并改为使用浮点数：

<div id="c">
    <div class="i"><div>hello</div>
    </div>
    <div class="i"><div>i</div>
    </div>
</div>

#c {
       overflow:hidden;
       background-color:purple;
       height:30px;
       padding:10px;
}


.i{
     float:left;
     height:20px;
     width:25%;
}
.i div {
     border:1px solid white;
}

Answer 5

尝试使用float:left代替display:inline-block

Answer 6

您的.i班级必须

.i{
    border:1px solid white;

    height:20px;
    width:25%; 
    float:left;/* <-- this*/
    box-sizing:border-box;/* <-- this*/


}

http://jsfiddle.net/vlrprbttst/n3aa3/6/

我不明白你为什么要使用display:inline-block

行中最后一个内联div之前的换行符（div溢出）

6 个答案: