Es un truco sencillo, pero ingenioso para hacer que las listas se muestren en varias columnas. Nosotros hemos puesto tres columnas, pero se podrían haber creado las que se hubieran deseado.

Se trata simplemente de crear una lista y definir con estilos CSS la anchura de sus elementos. Definiremos la anchura de los elementos <LI> como un 30% del total de anchura de la lista.

Los estilos CSS que colocaremos son los siguientes. Primero veremos el estilo para lo que es la lista <UL> y luego los de los elementos de la lista <LI>:

UL.col3
{
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FLOAT: left;
PADDING-BOTTOM: 0px;
MARGIN: 15px 0px;
WIDTH: 100%;
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none
}

UL.col3 LI
{
PADDING-RIGHT: 2px;
DISPLAY: inline;
PADDING-LEFT: 2px;
FLOAT: left;
PADDING-BOTTOM: 2px;
WIDTH: 30%;
PADDING-TOP: 2px
}

Para crear varias columnas en CSS se define en el estilo UL.col3 LI, donde el width es el tamaño de cada columna. Así automáticamente se irán creando las columnas. Como hemos puesto un 30%, el espacio donde esté la lista se dividirá en tres columnas, sin necesidad de utilizar tablas.

El html quedaría así para la lista:

<ul class="col3">
<li>Lo que sea</li>
<li>Segunda opcion</li>
<li>Tercera cosa</li>
<li>Otra cosa, que aparecerá en la primera columna</li>
<li>Otra cosa para la segunda columna</li>
<li>Y esto para la tercera columna</li>
</ul>