制作垂直分隔符css

Question

我需要帮助制作双垂直线。

以下是款式：

.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-separator的宽度为2px，这会导致问题。我试图使.slide-container宽度略低于25％（如23.853％），但这不是决定。

我不知道如何以其他方式实现此功能。

顺便说一下，我正在使用Foundation 5和Compass。

表示问题的小提琴：http://jsfiddle.net/5w7Hr/

Answer 1

width:25%通常不包括边距和边框。当所有这些加在一起时，宽度超过100％。这就是为什么最后一个框被推下来的原因。您可以通过添加box-sizing设置来解决此问题，如下所示。

注意：默认情况下显示为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;
}

Demo