守望的麦子

兼容所有主流浏览器的 CSS 间隔竖线

2010-07-07    大连 /others/2010/07/07/css-interval-vertical-line.html others css

本文最近更新于 2018 年 05 月 15 日

有时候需要使用 | 间隔网站选项,当然有很多的选择,你会怎么实现呢?是不是使用下面的代码:

<a href="https://www.wheat.at/">首页</a>|<a href="https://www.wheat.at/about">关于</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-leftpadding-right 来控制。

关于作者
麦子,80 后,现从事通信行业。安卓玩家一个人的书房朗读者。
MRJENGLISH
jsntn
jasonwtien
jasonwtien
更多…… /about.html

最近更新: