html – 制作垂直分隔符css

概述我需要帮助制作双垂直线. 这是风格： .slide-container{ text-align: center; width: 25%;}.v-separator{ content: ""; display: inline-block; width: 0px; height: 230px; border-right: 1px sol 我需要帮助制作双垂直线.

这是风格：

.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/

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

注意：默认情况下显示为内联块的元素具有指定的边距,因此我们也必须通过指定负边距来抵消(源：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

总结

以上是内存溢出为你收集整理的html – 制作垂直分隔符css全部内容，希望文章能够帮你解决html – 制作垂直分隔符css所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。