Question

我不确定为什么div不在同一条线上：

我怎样才能做到这一点？如果我使用40％的2个孩子div正确对齐。

我不是要求浮动解决方案。我只是想知道为什么这不起作用。

Answer 1

简单：

然而，当使用内联块时，换行符/空格会在元素之间引入“间隙”，因此50px + 50px +“gap”=大于父级的宽度，迫使孩子在另一个下面包裹而不是坐在旁边

为避免这种差距，请不要放空格：

<parent>
    <child>foo</child><child>bar</child>
                     ^^^--no gap, whitespace or newline between

通常，我在列表项上这样做，以便结束和打开没有空格：

<ul>
   <li>
       item
   </li><li> //close and open immediately, no gaps
       item
   </li><li>
       item
   </li>
</ul>

Answer 2

你必须使用浮动div。添加：

float: left;

并使用property：

停止浮动添加到行空div的末尾

clear:both;

Answer 3

显示：内联块始终从右侧开始一些间距。因此，我们可以将font-size:0，word-spacing:1em，letter-spacing:1em移除到那里的parent.Write，如下所示：

.parent {font-size:0;}
.child {font-size:15px}