利用 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