当前位置:编程学习 > html/css >>

链接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来控制。

CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,