谈谈垂直分割线的几种写法
Posted _Simon
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了谈谈垂直分割线的几种写法相关的知识，希望对你有一定的参考价值。
谈谈分垂直分割线的几种写法，我们对这种分隔线不会陌生，在项目需求中会经常遇到，我们来看看
下边的几种写法，
方法一：
<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;
}
利用背景图片；优点：可控性当然就是图片的制作大小；缺点：要切图；
以上。。。。
以上是关于谈谈垂直分割线的几种写法的主要内容，如果未能解决你的问题，请参考以下文章