Html 制作垂直分隔符css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24968504/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making vertical separator css
提问by VIRUS
I need help with making double vertical lines.
我需要帮助制作双垂直线。
Here are styles:
以下是样式：
.slide-container
{
text-align: center;
width: 25%;
}
.v-separator
{
content: "";
display: inline-block;
width: 0px;
height: 230px;
border-right: 1px solid #fafafa;
border-left: 1px solid #b4b4b4;
padding: 0;
position: relative;
top: 20px;
}
.v-separatorhas width 2px because of border and this causes the problem. I have tried to make .slide-containerwidth a bit less than 25% (like 23.853%), but this is not the decision.
.v-separator由于边框宽度为 2px，这会导致问题。我试图使.slide-container宽度小于 25%（如 23.853%），但这不是决定。
I have no idea how to implement this feature somehow else.
我不知道如何以其他方式实现此功能。
Btw I am using Foundation 5 and Compass.
顺便说一句，我正在使用 Foundation 5 和 Compass。
fiddle which demonstrates the problem: http://jsfiddle.net/5w7Hr/
演示问题的小提琴：http: //jsfiddle.net/5w7Hr/
回答by Harry
The width:25%generally doesn't include the margins and borders. When all these are added together the width exceeds 100%. This is the reason why the last box gets pushed down. You can fix this by adding box-sizingsetting as shown below.
在width:25%通常不包括边距和边框。当所有这些加在一起时，宽度超过 100%。这就是最后一个盒子被推下的原因。您可以通过添加box-sizing如下所示的设置来解决此问题。
Note:Elements whose display is inline-blockby default have a margin assigned and hence we have to offset that also by assigning a negative margin (Source: CSS Tricks). Alternately, using float: leftinstead of display: inline-blockis also a good option.
注意：inline-block默认情况下显示的元素分配了边距，因此我们也必须通过分配负边距来抵消它（来源：CSS Tricks）。或者，使用float: left代替display: inline-block也是一个不错的选择。
#wrapper
{
width: 600px;
background: lime;
box-sizing: border-box;
}
.slide-container
{
text-align: center;
width: 25%;
display: inline-block;
margin: 0px -4px;
}
