为什么这些div不是水平对齐的？为什么他们会破线？

Question

这个HTML:

<div style="border:1px solid blue; margin: auto; height:250px; width:600px;">
    <div style="border:1px solid red; height:50px; width:80px;"></div>
    <div style="border:1px solid red; height:50px; width:80px;"></div>
    <div style="border:1px solid red; height:50px; width:80px;"></div> 
    <div style="border:1px solid red; height:50px; width:80px;"></div>
</div>

为什么红色div不在同一水平行中,如何将它们放在同一行？

Answer 1

好的，div 是块元素，有时我使用 div 来包含菜单。因此，您可以将调用的样式属性添加display: inline-block到内部 div，如果您希望这些 div 在容器 div 内居中，则可以使用text-align: center. 它将适用于所有类型的块元素。

<div style="border:1px solid blue; margin: auto; text-align:center; height:250px; width:600px;">
    <div style="border:1px solid red; height:50px; width:80px; display:inline-block;"></div>
    <div style="border:1px solid red; height:50px; width:80px;display:inline-block;"></div>
    <div style="border:1px solid red; height:50px; width:80px;display:inline-block;"></div> 
    <div style="border:1px solid red; height:50px; width:80px;display:inline-block;"></div>
</div>