Question

我想知道为什么在设置宽度时元素会占据整个宽度？

例如，

<div style="width:50px;">


<fieldset>
<legend>test A</legend>

<table>
<tr>
<td><asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> </td><td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> </td>
</tr>

</table>

</fieldset>
</div>

<div style=" width:300px; float:left;">
<fieldset><legend>test2</legend>
<table>
<tr>
<td><asp:Label ID="Label2" runat="server" Text="Label"></asp:Label> </td><td>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> </td>
</tr>
</table>
</fieldset>
</div>

当我查看chrome开发人员的工具时，我可以看到第二个表不能在第一个表或第一个div旁边浮动，因为第一个div占用了整个地方，虽然我限制了它的宽度。我知道如果在第一次潜水中使用“float：left”，两个div将一个接一个地浮动。但我想知道为什么使用宽度不足以做到这一点？

有人可以向我解释一下吗？

Answer 1

默认情况下，<div>是块级元素，这意味着在CSS框模型中，它们会启动一个新行，除非它们被浮动。

这就是符合标准的浏览器的工作原理。

Answer 2

尝试在样式div中添加“display：inline-block”。

当我设置宽度时，为什么元素会占据整个空间？

2 个答案: