0

我正在尝试在单个水平条中的 4 个部分之间创建一个 1px 分隔线，例如，A、BC 和 D。我必须在每个部分和这个水平的边界之间保持顶部填充 = 10px 和底部填充 = 10 px酒吧。此外，我需要在 A 和 B 之间保留一个 1 像素的垂直分隔线。我还可以创建 10 像素和 1 像素分隔线的顶部和底部填充。但是 1px 的分线器是不完整的，这意味着它没有从顶栏到底栏接触。它仅放置在放置文本的中心。有人可以指导我如何将 1px 分隔线扩展到整个长度吗？

代码片段

<div class="top-bar">
        <div class="sub-section" >
            <p style="padding-left: 30px;">vvvvv</p>
        </div>
        <div class="sub-section">
            <p style="padding-left: 30px;">ysadfafdaafaf</p>
        </div>
        <div class="sub-section">
            <p style="padding-left: 30px;">werwtrwer rtyryryrytr</p>
        </div>
        <div class="sub-section">
            <p style="padding-left: 38px;">xsvcsfwr</p>
        </div>
    </div>



.top-bar{
width:800px;
float:left;
padding-bottom: 10px;
padding-top:10px;

}
 .sub-section{
width:200px;
float:left;
border-right: 1px solid #FFFFFF;

}

4

1 回答 1

0

添加box-sizing: border-box到您的 .sub-section 类 - 这会将边框放置在 200px 宽度内，并解决您遇到的布局问题。（有关 box-sizing 属性的更多信息）

小提琴

.sub-section{
  width:200px;
  float:left;
  border-right: 1px solid green;
  -moz-box-sizing: border-box; /* add this */
  box-sizing: border-box; /* add this */
}
于 2013-10-07T08:12:15.747 回答