Question

这是我的asp.net应用程序的代码，下面是我到目前为止的CSS。

我遇到的问题是我的边框只覆盖了应用程序中的H2元素。我想要的是边框覆盖“persInfo”div中的所有内容，但它没有这样做，我无法弄清楚原因。

当我在Visual Studio中使用“split”时，它会显示覆盖所有内容的边框，但是当我运行它时，它只覆盖H2元素。

#persInfo {
  border: 3px solid;
  border-radius: 25px;
}
#lblWrapper {
  width: 50%;
  float: left;
}
#tbxWrapper {
  width: 50%;
  float: right;
}
.lbl {
  display: block;
  margin-top: 9px;
  margin-left: 20px;
}
.tbx {
  display: block;
  margin-top: 6px;
}

<div id="persInfo">
  <h2>Personal Information</h2>
  <div id="lblWrapper">
    <asp:Label ID="Label7" runat="server" Text="First name" CssClass="lbl"></asp:Label>
    <asp:Label ID="Label2" runat="server" Text="Surname" CssClass="lbl"></asp:Label>
    <asp:Label ID="Label3" runat="server" Text="Email" CssClass="lbl"></asp:Label>
    <asp:Label ID="Label4" runat="server" Text="Confirm Email" CssClass="lbl"></asp:Label>
    <asp:Label ID="Label5" runat="server" Text="Password" CssClass="lbl"></asp:Label>
    <asp:Label ID="Label6" runat="server" Text="Confirm Password" CssClass="lbl"></asp:Label>
  </div>
  <div id="tbxWrapper">
    <asp:TextBox ID="tbxFname" runat="server" CssClass="tbx"></asp:TextBox>
    <asp:TextBox ID="tbxSname" runat="server" CssClass="tbx"></asp:TextBox>
    <asp:TextBox ID="tbxEmail" runat="server" CssClass="tbx"></asp:TextBox>
    <asp:TextBox ID="tbxEmail2" runat="server" CssClass="tbx"></asp:TextBox>
    <asp:TextBox ID="tbxPass" runat="server" CssClass="tbx"></asp:TextBox>
    <asp:TextBox ID="tbxPass2" runat="server" CssClass="tbx"></asp:TextBox>
  </div>
</div>

Answer 1

仅包含浮动元素的元素将崩溃。

你需要清除＆＃34;花车。

对于各种所谓的＆＃34; clearfix＆＃34;选项，请参阅此Question

我的边界只接近我div中的H2元素

1 个答案: