前端导航栏标签中间的小竖线 实现方法

此方法在可控性方面比较占优势但是会增加一个竖线的节点

html部分：

• 小米商城|


• MIUI|


• LOT|


• 云服务|


• 水滴|


• 金融|


• 有品|


• 政企服务|


• select Region

CSS部分：

.top .top_page .top_page_l ul li{
float: left;
margin-right: 6px;//要计算好距离
}
.top .top_page .top_page_l ul li a{
display: inline-block;
margin-right: 6px;//计算好距离
}

 

方法二：

HTML：

       

注册

登录

        

CSS：

         .fenge{

padding:12px 6px 0px 6px;

margin-left: 6px;

border-left: 1px solid #000;

font-size: 0;

}

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

方法三（我一般不用 。因为ps不好）

HTML：

       

注册

登录

CSS：

       .reg_img{

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

               padding-right: 6px;

               display: block;

               margin-right: 6px;

           }

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

以上。。。。

 

转载于:https://www.cnblogs.com/xiaoping-2014/p/9031466.html