链接a里面使用CSS实现间隔线|(竖线) 的代码
我们来看看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来控制。