Question

<div id="DateAndTime" style="clear:left; width:100%" class="Frame">
<h2>Date & Time Criteria</h2>
<h3>Permitted Days of the Week</h3>
<p class="DataForm" style="float:left">

<asp:CheckBox id="chkMonday" runat="server" Text="Monday"/><br />
<asp:CheckBox id="chkTuesday" runat="server" Text="Tuesday"/><br />
<asp:CheckBox id="chkWednesday" runat="server" Text="Wednesday"/><br />
<asp:CheckBox id="chkThursday" runat="server" Text="Thursday"/><br />
<asp:CheckBox id="chkFriday" runat="server" Text="Friday"/><br />
<asp:CheckBox id="chkSaturday" runat="server" Text="Saturday"/><br />
<asp:CheckBox id="chkSunday" runat="server" Text="Sunday"/><br />
</p>
<p class="DataForm" style="float:left">
<asp:CheckBox id="CheckBox1" runat="server" Text="Monday"/><br />
<asp:CheckBox id="CheckBox2" runat="server" Text="Tuesday"/><br />
<asp:CheckBox id="CheckBox3" runat="server" Text="Wednesday"/><br />
<asp:CheckBox id="CheckBox4" runat="server" Text="Thursday"/><br />
<asp:CheckBox id="CheckBox5" runat="server" Text="Friday"/><br />
<asp:CheckBox id="CheckBox6" runat="server" Text="Saturday"/><br />
<asp:CheckBox id="CheckBox7" runat="server" Text="Sunday"/><br />
</p>

<p style="clear:left">&nbsp</p>
</div>

如果我删除了最后一个<p style="clear:left">行，则div不会拉伸以包含复选框。是否有更好的方法来强制它扩展？

Answer 1

是的，这就是CSS的工作原理。有一些解决方法（my preferred one，another approach）允许父级指定它将展开以包含其浮点数。

Answer 2

我假设您要并排显示2列复选框。我个人认为当你真的应该使用'display：inline-block'时浮动作为一个黑客。使用内联块时需要注意几点。在Internet Explorer 7及更低版本中，它仅适用于以内联开头的元素，您可能会发现内容最终位于元素的底部。由于元素现在像块一样呈现，您可能还需要设置宽度。

您可以通过执行以下操作来修复它们，将p标记更改为fieldsets，这使得代码更具语义性，因为它们实际上是字段集，并将显示规则应用于它们以及“vertical-align” ：top'喜欢这样：

<div id="DateAndTime" style="clear:left; width:100%" class="Frame">
<h2>Date & Time Criteria</h2>
<h3>Permitted Days of the Week</h3>
<fieldset class="DataForm" style="display:inline-block; vertical-align:top">

<asp:CheckBox id="chkMonday" runat="server" Text="Monday"/><br />
<asp:CheckBox id="chkTuesday" runat="server" Text="Tuesday"/><br />
<asp:CheckBox id="chkWednesday" runat="server" Text="Wednesday"/><br />
<asp:CheckBox id="chkThursday" runat="server" Text="Thursday"/><br />
<asp:CheckBox id="chkFriday" runat="server" Text="Friday"/><br />
<asp:CheckBox id="chkSaturday" runat="server" Text="Saturday"/><br />
<asp:CheckBox id="chkSunday" runat="server" Text="Sunday"/><br />
</fieldset>
<fieldset class="DataForm" style="display:inline-block; vertical-align:top">
<asp:CheckBox id="CheckBox1" runat="server" Text="Monday"/><br />
<asp:CheckBox id="CheckBox2" runat="server" Text="Tuesday"/><br />
<asp:CheckBox id="CheckBox3" runat="server" Text="Wednesday"/><br />
<asp:CheckBox id="CheckBox4" runat="server" Text="Thursday"/><br />
<asp:CheckBox id="CheckBox5" runat="server" Text="Friday"/><br />
<asp:CheckBox id="CheckBox6" runat="server" Text="Saturday"/><br />
<asp:CheckBox id="CheckBox7" runat="server" Text="Sunday"/><br />
</fieldset>
</div>

你可能已经注意到你不再需要一个带有'clear：none'的备用div

包含浮动左项的Div不能正确展开

2 个答案: