武林網(wǎng)(www.companysz.com)文章簡(jiǎn)介：最近在做一個(gè)網(wǎng)站項(xiàng)目碰到一個(gè)老話題,就是類目之間豎線的做法.

　　最近在做一個(gè)網(wǎng)站項(xiàng)目碰到一個(gè)老話題,就是類目之間豎線的做法.

　　我以前的做法都是在每個(gè)a標(biāo)簽之間用”|”符號(hào)來隔開,其實(shí)我知道這樣做并不是很科學(xué),一直沒找到解決途徑,看到了TAOBAO UED和blueidea上有介紹這種豎線的做法,

　　研究了一下.TAOBAO UED中寫到:

　　類目間的豎線無非都只有三種。

　　1、背景圖

　　在a標(biāo)簽設(shè)置一個(gè)padding 用寬1px高不等的背景圖來position到右側(cè)。

　　缺點(diǎn)：最后一個(gè)還是要用class來隱藏掉背景。

　　2、符號(hào)

　　在每個(gè)a標(biāo)簽之間用”|”符號(hào)來填充。

　　缺點(diǎn)：html文件變大，文件維護(hù)變得很麻煩，而且在html中毫無意義。

　　3、a標(biāo)簽右側(cè)的boder。

　　同背景圖一樣，只不過使用border-right來代替。缺點(diǎn)也同上。

　　其實(shí)淘寶網(wǎng)站的做法是。利用ul的overflow:hidden 再將li的margin-right:-1px的做法做出來的。這樣的做法就可以同時(shí)避免以上的缺點(diǎn)了。現(xiàn)在越來越多的網(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>