如图所示,在前端经常需要用到各种间隔符号,用CSS实现应该是最佳办法,当然如果你用图片、用符号都可以实现,但应用起来不如CSS来的那么顺,那么爽!
今天就用CSS来制作这个间隔符,并且让间隔符号垂直居中,并且高度低于前后文字,这样显得干练!
<style> *{font-size: 24px;} span{padding: 16px 6px 1px; margin-left: 12px; border-left: 2px solid;font-size: 0;} </style> 注册<span></span>登陆
实现的方法,就是默认使用了inline(span标签就是行内,默认应该算是加了inline),同时使用padding,来实现间隔符的高度!
如果不是span呢,而是div呢?那就加一个display:inline,再进行padding:
<style> *{font-size: 24px;} .fuhao{display: inline;padding: 16px 6px 1px; margin-left: 12px; border-left: 2px solid;font-size: 0;} </style> 注册<div class="fuhao"></div>登陆
一样可以实现上图的效果!