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

Question

我正在尝试在单个水平条中的 4 个部分之间创建一个 1px 的分隔线例如，A、B、C 和 D。我必须在每个部分和该水平条的边框之间保持顶部填充 = 10px 和底部填充 =10 像素。我还需要在 A 和 B 之间保留一个 1px 的垂直分隔线。我还能够创建 10px 和 1 px 分隔符的顶部和底部填充。但是 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 */
}