Question

我正在尝试在单个水平条中的4个部分之间创建1px分隔符例如，A，B C和D.我必须在每个部分和该水平条的边界之间保持顶部填充= 10px和底部填充= 10像素。另外，我需要在A和B之间保留1px垂直分频器。我也能够创建10px和1px分频器的顶部和底部填充。但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;

}

Answer 1

将box-sizing: border-box添加到您的.sub-section类 - 这会将边框置于200px宽度内并修复您的布局问题。（More info about box-sizing property）

<强> FIDDLE

.sub-section{
  width:200px;
  float:left;
  border-right: 1px solid green;
  -moz-box-sizing: border-box; /* add this */
  box-sizing: border-box; /* add this */
}

1px分隔器未完全放置在容器内

1 个答案: