利用 CSS 達到同寬多欄顯示列表
我有一堆 trac sites 的 links 要列表，之前是直接 <ul> 配 <li> 就給它列下去，可是後來 projects 一多，畫面就必須要捲動，很難用。所以需要尋找 CSS 機制，讓這些 projects 的 links 能夠像 ls 一樣，分欄顯示：
- Listamatic - "one list, many options"
- CSS3 module: Multi-column layout
- Balance your CSS Columns with JavaScript
- Do You Want To Do That With CSS? - Multiple Column Lists - 目前找到的最好解法，既簡單又有效。
- CSS Tutorial - 比 w3schools 的 CSS tutorial 還要清楚明暸。
最後的寫法如下：
#thelist ul{ float: left; width: 100%; margin: 0; padding: 0; list-style-type: none;}
#thelist ul li{ float: left; width: 6.5em; margin: 0; padding: 0;}
#thelist ul li a{ text-decoration: none;}
#thelist ul li a:hover{ text-decoration: underline;}
Post a Comment