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

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

下边的几种写法，

方法一：

<div>

<a href="">注册</a>｜<a href="">登录</a>

</div>

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

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

缺点：可控性差；

方法二：

HTML：

    <div>

            <a href="" class="reg">注册</a>

            <a href="">登录</a>

    </div>

CSS：

    .reg:after{

    content: "|";

    display: inline-block;

            }

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

css样式也可以这么写

      .reg:after {

            content: " ";

            border-left: 1px solid #000;

            margin-left: 6px;

           }

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

方法三：

HTML：

       <div>

<a href="">注册</a>

<span class="fenge"></span>

<a href="">登录</a>

        </div>

CSS：

         .fenge{

padding:12px 6px 0px 6px;

margin-left: 6px;

border-left: 1px solid #000;

font-size: 0;

}

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

方法四：

HTML：

       <div>

<a href="" class="reg_img">注册</a>

<a href="">登录</a>

</div>

CSS：

       .reg_img{

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

               padding-right: 6px;

               display: block;

               margin-right: 6px;

           }

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

以上。。。。