使用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來控制。