Generar Columnas con CSS de una lista sin tablas

15/1/07 - 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>

Autoría, licencia y acciones sobre este artículo

Informe de Pol Salvat* URL: http://www.mistrucos.net Licencia Copyleft. Puedes reproducirlo citando al autor y enlazando su página web. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

Añadir un comentario del artículo Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar.

Se muestran 5 comentarios revisados

Añadir un comentario del artículo

Enlaces:

Maestrosdelweb

  Ir arriba