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

我试图在单个水平条中的4个部分之间创建一个1px分隔符 例如，A、B、C和D。我必须在每个部分和水平条的边界之间保持顶部填充=10px，底部填充=10px。我还需要在a和B之间保持一个1px的垂直分隔线。 我能够创建顶部和底部的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;

vvv

ysadfafaf

werwtrwer rtyrytr

xsvcsfwr

.顶栏{
宽度：800px；
浮动：左；
垫底：10px；
填充顶部：10px；
}
.分节{
宽度：200px；
浮动：左；
右边框：1px实心#FFFFFF；

---

}

将

框大小：边框框

添加到.subsection类中-这将使边框的宽度在200px以内，并将解决您遇到的布局问题。（）

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

---

如果你也能提供相关的HTML，我相信这可以帮助我们更快地找到解决方案。请将你的代码放在小提琴中。嗨，Danield，谢谢你的解决方案。但是它对meDoes不起作用。我发布的小提琴工作吗？如果没有-有什么问题吗？是的，提琴对我有用。但是当我在代码中使用提琴时。它仍然是一样的。你在使用哪个浏览器？Firefox有一个特定于供应商的盒子大小规则。--moz框大小：边框框；（看一下fiddle中的css代码——将这两条规则复制到您的项目中）