Question

此HTML：

＆＃13;

<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>

＆＃13;

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

Answer 1

这就是你要找的东西：

<style type="text/css">
    div.littleDiv {
        display: inline-block;
        border:1px
        solid red; 
        height:50px; 
        width:80px;
    }
</style>
<div style="border:1px solid blue; margin: auto; height:250px; width:600px;">
    <div class="littleDiv"></div>
    <div class="littleDiv"></div>
    <div class="littleDiv"></div> 
    <div class="littleDiv"></div>
</div>

这已经可以使用float很长一段时间了，但现在使用内联块更容易。内联块元素类似于内联元素，但它们可以具有宽度和高度。

但是，您可能希望使用float: lefts代替display: inline-block;

来自MDN

浮点CSS属性指定一个元素应该从正常流中获取并放置在其容器的左侧或右侧，其中文本和内联元素将环绕它。浮动元素是float的计算值不是none的元素。

Answer 2

这是div和所有其他块元素的默认行为。要更改它，您必须将display设置为inline-block或float设置为left或right。（设置float: left;将证明元素在容器左侧的合理性，而float: right;将证明它们在右侧是合理的。）我建议练习inline-block。它通常是一个更好的解决方案，因为它将元素保留在文档的正常流程中，而不是像float那样将它们从与相邻元素的交互中删除。

Answer 3

Div元素是块样式元素，默认情况下。为了使它在水平lvl使样式显示属性内联块或向左或向右浮动：

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

OR：

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

Answer 4

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

＆＃13;

<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>

＆＃13;

Answer 5

这一个做了伎俩，其他答案缺少这个细节text-align：center;。

谢谢你们！

＆＃13;

<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>

＆＃13;

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

5 个答案: