Lista en multi-columnas

>
• Aloe >
• Bergamot >
• Calendula >
• Damiana >
• Elderflower >
• Feverfew >
• Ginger >
• Hops >
• Iris >
• Juniper >
• Kava kava >
• Lavender >
• Marjoram >
• Nutmeg >
• Oregano >
• Pennyroyal >

Este es un ejemplo de listas ordenadas en columnas. Es cosa de alistapart.

Esta es la guía para el CSS y el HTML:

.- CSS:

ul#example7
{
width: 30em;
margin: 0;
padding: 0;
border: 1px solid #A52A2A; /* brown */
background-image: url("SophieAresPilonPale.jpg");
}
ul#example7 li
{
/* list item dimensions */

width: 10em;
height: 2em;

/* Clear the default margins & padding
for cross-browser efficiency */
margin: 0;
padding: 0;

/* suppress item markers */
list-style-type: none;
}

/* Purty it up */
ul#example7 li a
{
display: block;
width: 10em;
line-height: 2em;
font-weight: bold;
text-decoration: none;
text-align: center;
color: #A52A2A; /* brown */
}
/* mouseover gets the bright photo */
ul#example7 li a:hover
{
color: #FFF; /* white */
background-image: url("SophieAresPilonBright.jpg");
}

/* give each list item a piece of the picture */

li.aloe a { background-position: 0em -0em }
li.berg a { background-position: 0em -2em }
li.cale a { background-position: 0em -4em }
li.dami a { background-position: 0em -6em }
li.elde a { background-position: 0em -8em }

li.feve a { background-position: -10em -0em }
li.ging a { background-position: -10em -2em }
li.hops a { background-position: -10em -4em }
li.iris a { background-position: -10em -6em }
li.juni a { background-position: -10em -8em }

li.kava a { background-position: -20em -0em }
li.lave a { background-position: -20em -2em }
li.marj a { background-position: -20em -4em }
li.nutm a { background-position: -20em -6em }
li.oreg a { background-position: -20em -8em }
li.penn a { background-position: -20em -10em }

/* Bring the first item of each column
back up to the level of item 1.
Vertical return = items * height.
Here, 5 items * 2em line-height = 10em */

ul#example7 li.feve,
ul#example7 li.kava
{
margin-top: -10em;
}

/* Horizontal positions of the columns */
ul#example7 li.aloe,
ul#example7 li.berg,
ul#example7 li.cale,
ul#example7 li.dami,
ul#example7 li.elde
{
margin-left: 0em;
}
ul#example7 li.feve,
ul#example7 li.ging,
ul#example7 li.hops,
ul#example7 li.iris,
ul#example7 li.juni
{
margin-left: 10em;
}
ul#example7 li.kava,
ul#example7 li.lave,
ul#example7 li.marj,
ul#example7 li.nutm,
ul#example7 li.oreg,
ul#example7 li.penn
{
margin-left: 20em;

.- HTML:

<ul id="example7"

><li class="aloe"><a href="#">Aloe</a></li><li class="berg"><a href="#">Bergamot</a></li><li class="cale"><a href="#">Calendula</a></li><li class="dami"><a href="#">Damiana</a></li><li class="elde"><a href="#">Elderflower</a></li><li class="feve"><a href="#">Feverfew</a></li><li class="ging"><a href="#">Ginger</a></li><li class="hops"><a ref="#">Hops</a></li><li class="iris"><a href="#">Iris</a></li><li class="juni"><a href="#">Juniper</a></li><li class="kava"><a href="#">Kava kava</a></li><li class="lave"><a href="#">Lavender</a></li><li class="marj"><a href="#">Marjoram</a></li><li class="nutm"><a href="#">Nutmeg</a></li><li class="oreg"><a href="#">Oregano</a></li><li class="penn"><a href="#">Pennyroyal</a></li>

</ul>