谈谈垂直分割线的几种写法

谈谈分垂直分割线的几种写法，我们对这种分隔线不会陌生，在项目需求中会经常遇到，我们来看看

下边的几种写法，

方法一：

<div>

</div>

直接在文字中间插入短线字符；

优点：简单、直接、高效。

缺点：可控性差；

方法二：

HTML：

<div>

</div>

CSS：

.reg:after{

content: "|";

display: inline-block;

}

伪元素方法，其实跟直接插入差不多，一个是真是存在的字符，一个是伪的元素

css样式也可以这么写

.reg:after {

content: " ";

border-left: 1px solid #000;

margin-left: 6px;

}

利用border实现竖线；优点：不用多写多余的元素；缺点：可控性也差；

方法三：

HTML：

<div>

</div>

CSS：

.fenge{

padding:12px 6px 0px 6px;

margin-left: 6px;

border-left: 1px solid #000;

font-size: 0;

}

利用border和padding ，这里使用padding主要是可以调控竖线的高度。实现可控性。优点：可控性高；缺点：多一个空白节点；

方法四：

HTML：

<div>

</div>

CSS：

.reg_img{

background: url(../images/line.gif) no-repeat right;

padding-right: 6px;

display: block;

margin-right: 6px;

}

利用背景图片；优点：可控性当然就是图片的制作大小；缺点：要切图；

以上。。。。