最近在做一個(gè)網(wǎng)站項(xiàng)目碰到一個(gè)老話題,就是類目之間豎線的做法.
我以前的做法都是在每個(gè)a標(biāo)簽之間用”|”符號(hào)來(lái)隔開,其實(shí)我知道這樣做并不是很科學(xué),一直沒(méi)找到解決途徑,看到了TAOBAO UED和blueidea上有介紹這種豎線的做法,
研究了一下.TAOBAO UED中寫到:
類目間的豎線無(wú)非都只有三種。
1、背景圖
在a標(biāo)簽設(shè)置一個(gè)padding 用寬1px高不等的背景圖來(lái)position到右側(cè)。
缺點(diǎn)：最后一個(gè)還是要用class來(lái)隱藏掉背景。
2、符號(hào)
在每個(gè)a標(biāo)簽之間用”|”符號(hào)來(lái)填充。
缺點(diǎn)：html文件變大，文件維護(hù)變得很麻煩，而且在html中毫無(wú)意義。
3、a標(biāo)簽右側(cè)的boder。
同背景圖一樣，只不過(guò)使用border-right來(lái)代替。缺點(diǎn)也同上。
其實(shí)淘寶網(wǎng)站的做法是。利用ul的overflow:hidden 再將li的margin-right:-1px的做法做出來(lái)的。這樣的做法就可以同時(shí)避免以上的缺點(diǎn)了。現(xiàn)在越來(lái)越多的網(wǎng)站都是這樣做了。
我嘗試寫了一下,代碼如下:
css部分:
.topnav { width:264px; float:right; display:inline; overflow:hidden}
.topnav ul { margin:0; padding:0}
.topnav li { width:66px; height:auto; float:left; text-align:center; border-right:1px solid #736e6e; margin-right:-1px;}
html部分:
html部分:
<div class="topnav">
<ul>
<li>我要合作</li>
<li>易聞博客</li>
<li>聯(lián)系我們</li>
<li>網(wǎng)站地圖</li>
</ul>
</div>
