CSS學習之類目之間豎線的練習實例

2024-07-11 08:44:32

字體：大中小

來源：轉載

供稿：網友

最近在做一個網站項目碰到一個老話題,就是類目之間豎線的做法.
　　最近在做一個網站項目碰到一個老話題,就是類目之間豎線的做法.

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

　　研究了一下.TAOBAO UED中寫到:
　　類目間的豎線無非都只有三種。
　　1、背景圖
　　在a標簽設置一個padding 用寬1px高不等的背景圖來position到右側。
　　缺點：最后一個還是要用class來隱藏掉背景。
　　2、符號
　　在每個a標簽之間用”|”符號來填充。
　　缺點：html文件變大，文件維護變得很麻煩，而且在html中毫無意義。
　　3、a標簽右側的boder。
　　同背景圖一樣，只不過使用border-right來代替。缺點也同上。
　　其實淘寶網站的做法是。利用ul的overflow:hidden 再將li的margin-right:-1px的做法做出來的。這樣的做法就可以同時避免以上的缺點了。現在越來越多的網站都是這樣做了。
　　我嘗試寫了一下,代碼如下:
　　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>
<li>網站地圖</li>
</ul>
</div>