使用CSS实现间隔线|(竖线)

是不是考虑用这个？
<a href="#">整机</a>|<a href="#">LCD</a>

我们来看看taobao和paipai对这块的实现，这两个站首页罗例产品分类时，都使用了这种样式：

paipai的实现
a{
border-left: 1px solid #D9D9D9;
margin-left: -1px;
padding-left: 5px;
}

taobao的实现：
a{
border-left: 1px solid #B7D0E4;
display: inline-block;
margin-left: -1px;
padding: 0px 0px 0px 3px;
}

现在你会了吗？


这段CSS很巧妙的将margin-left设为-1，将第一个border隐藏了起来，而且兼容所有的主流浏览器。这样，就不用给第一个或者最后一个样式做特殊样式处理了。如果间隔需要大些，可以很方便的通过设置padding-left和padding-right来控制。