守望的麦子

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

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

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

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

1 <a href="https://www.wheat.at/">首页</a>|<a href="https://www.wheat.at/about">关于</a>

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

paipai的实现:

1 a{
2 border-left: 1px solid #D9D9D9;
3 margin-left: -1px;
4 padding-left: 5px;
5 }

taobao 的实现:

1 a{
2 border-left: 1px solid #B7D0E4;
3 display: inline-block;
4 margin-left: -1px;
5 padding: 0px 0px 0px 3px;
6 }

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

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

最近更新: