Listas de colunas múltiplas / Lista de colunas múltiplas com CSS

A marcação

A marcação é simples

<ul id="double">
<li>CSS</li>
<li>XHTML</li>
<li>Semantics</li>
<li>Accessibility</li>
<li>Usability</li>
<li>Web Standards</li>
<li>PHP</li>
<li>Typography</li>
<li>Grids</li>
<li>CSS3</li>
<li>HTML5</li>
<li>UI</li>
</ul>

E para transformá-la em uma lista de várias colunas:

ul{
width
:760px;
margin
-bottom:20px;
overflow
:hidden;
border
-top:1px solid #ccc;
}
li
{
line
-height:1.5em;
border
-bottom:1px solid #ccc;
float:left;
display
:inline;
}
#double li { width:50%;} /* 2 col */
#triple li { width:33.333%; } /* 3 col */
#quad li { width:25%; } /* 4 col */
#six li { width:16.666%; } /* 6 col */

Boa?


Fonte: CSSWIZARDRY.COM