JeffHung.Blog

我有一堆 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;
}