本文介绍了三种在HTML和CSS中创建竖线分隔符的方法。方法一利用`|`字符，可控性好但会增加额外节点；方法二通过设置`border`和`padding`，优点是高度可调，缺点是增加空白节点；方法三采用背景图片，可控性强但需切图。这些方法在前端布局中提供了灵活性，但也各有优缺点。
此方法在可控性方面比较占优势但是会增加一个竖线的节点
html部分：
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;
}
利用背景图片；优点：可控性当然就是图片的制作大小；缺点：要切图；
以上。。。。
435
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
