9三月/120
使用 CSS 來做階層清單
前言
前陣子客戶希望清單可以像 Word 有階層,一開始我還說不可以,後來花了點時間尋找,發現原來只需要靠 CSS 就可以完成啦!只是因為不支援 IE6 和 IE7 只好找別的方式囉!不過如果不需要支援 IE6 和 IE7 的話,可以考慮使用這種方式來做喔!
說明
首先先準備好我們要呈現階層的清單 HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<ol> <li>第1個項目 <ol> <li>第1個子項目</li> <li>第2個子項目</li> <li>第3個子項目</li> </ol> </li> <li>第2個項目 <ol> <li>第1個子項目</li> <li>第2個子項目</li> <li>第3個子項目</li> </ol> </li> <li>第3個項目 <ol> <li>第1個子項目</li> <li>第2個子項目</li> <li>第3個子項目</li> </ol> </li> </ol> |
接下來就是 CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 |
ol { counter-reset: item; } li { display: block; } li:before { content: counters(item, ".") " "; counter-increment: item; } |
如此一來就可以看到呈現的結果就有階層囉!
結論
其實還蠻簡單就可以達成階層清單,只是因為瀏覽器支援度的關係,可能實用度還不是很高,但是對我來說還是一個有趣的作法,也才知道原來靠 CSS 還是可以達到這樣的效果。
Leave a comment