Question

我正试图在div周围放置一个边框，我无法有效地执行此操作。

主要问题：

将边框分成两个部分的中间线不会延伸边框的整个长度。
顶部的背景颜色（.insiderbox类）不对齐。
我希望边境能够以更精简的方式拥抱div。

＆＃13;

.Box {
  border: 1px solid #000;
  -webkit-border-top-left-radius: 26px;
  -webkit-border-top-right-radius: 2px;
  -moz-border-radius-topleft: 2px;
  -moz-border-radius-topright: 2px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  width: 325px;
  font-size: 12pt;
  /* or whatever */
  padding: 4px;
  color: #fff;
  margin: 0 0 0 0px;
}
.insiderBox {
  background-color: #e2e2e2;
}

＆＃13;

<div id="ValidationPanel" Visible="false" runat="server" class="Box">
  <div style="border-bottom:1px solid black; height: 79px; width: 326px;" class="insiderBox">
    <h3 style="margin-bottom:20px; width: 319px;">
      Enter ATM Cash-In Ticket Amount
    </h3>
  </div>
  <div>
    <asp:TextBox ID="TxtValidateTotals" runat="server" length="50" title="Please Enter Totals Here" />
  </div>
  <div>
    <asp:Button runat="server" ID="btnValidationPanelValidateTotals" Text="Validate Totals" CausesValidation="true" OnClick="btnValidationPanelValidateTotals_Click" width="200" />
    asdasdasdasdasd
  </div>
</div>

＆＃13;

fiddle

Answer 1

您的.Box div周围有填充，删除填充，您将获得所需的结果。

.Box {
  padding: 0;
}

另一件事是使用边框设置div的背景，而不是内部的div。这可能是一个更好的选择。

.Box {
  background: #E2E2E2;
}

Answer 2

＆＃13;

.Box {
  border: 1px solid #000;
  -webkit-border-top-left-radius: 26px;
  -webkit-border-top-right-radius: 2px;
  -moz-border-radius-topleft: 2px;
  -moz-border-radius-topright: 2px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  width: 325px;
  font-size: 12pt;
  /* or whatever */
  padding: 0px;
  color: #fff;
  margin: 0 0 0 0px;
}
.insiderBox {
  background-color: #e2e2e2;
}
h3 {
  margin: 0
}

＆＃13;

<div id="ValidationPanel" Visible="false" runat="server" class="Box">
  <div style="border-bottom:1px solid black; height: 79px;" class="insiderBox">
    <h3 style="margin-bottom:20px; width: 319px;">
      Enter ATM Cash-In Ticket Amount
    </h3>
  </div>
  <div>
    <asp:TextBox ID="TxtValidateTotals" runat="server" length="50" title="Please Enter Totals Here" />
  </div>
  <div>
    <asp:Button runat="server" ID="btnValidationPanelValidateTotals" Text="Validate Totals" CausesValidation="true" OnClick="btnValidationPanelValidateTotals_Click" width="200" />
    asdasdasdasdasd
  </div>
</div>

＆＃13;

div周围的边界;背景颜色未完全填充

2 个答案: