0

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

例如，

<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 将一个接一个地浮动。但我想知道为什么使用宽度不足以做到这一点？

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

4

2 回答 2

2

默认情况下，<div>'s 是块级元素，这意味着在 CSS 盒子模型中，它们开始一个新行，除非它们是浮动的。

这就是符合标准的浏览器的工作方式。

于 2013-04-01T18:50:26.107 回答
1

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

于 2013-04-01T18:36:52.610 回答