103 votos

CSS: Maneras de dividir la lista en dos columnas, en la página?

Mi página tiene un 'flaco' de la lista: por ejemplo, una lista de los 100 elementos de una palabra de longitud cada uno. Para reducir el desplazamiento, quiero presentar esta lista en 2 o incluso 4 columnas en la página. ¿Cómo debo hacer esto con CSS?

Prefiero la solución para ser flexible, de modo que si la lista crece a 200 elementos, no tengo que hacer un montón de ajustes manuales para dar cabida a la nueva lista. Gracias.

210voto

thirtydot Puntos 114021

La solución CSS es: http://www.w3.org/TR/css3-multicol/

El soporte de los navegadores es exactamente lo que usted esperaría..

Funciona "en todas partes" con la excepción de Internet Explorer: http://caniuse.com/multicolumn

ul {
    -moz-column-count: 4;
    -moz-column-gap: 20px;
    -webkit-column-count: 4;
    -webkit-column-gap: 20px;
    column-count: 4;
    column-gap: 20px;
}

Ver: http://jsfiddle.net/pdExf/

Si IE es necesario un soporte, vas a tener que usar JavaScript, por ejemplo:

http://welcome.totheinter.net/columnizer-jquery-plugin/

Otra solución es el retroceso a la normalidad float: left por solo IE. El pedido será malo, pero al menos tendrá un aspecto similar:

Ver: http://jsfiddle.net/NJ4Hw/

<!--[if lt IE 10]>
<style>
li {
    width: 25%;
    float: left
}
</style>
<![endif]-->

Usted podría solicitar que el retroceso con Modernizr si ya la estás usando.

16voto

Matt Hampel Puntos 1490

Si usted está buscando una solución que funciona en IE, usted podría flotar los elementos de la lista a la izquierda. Sin embargo, esto se traducirá en una lista que serpentea alrededor, como este:

item 1 | item 2 | item 3
item 4 | item 5

En lugar de ordenadas columnas, como:

item 1 | item 4
item 2 | 
item 3 | 

El código para hacer que serían:

ul li {
  width:10em;
  float:left;
}

Se podría añadir una frontera-parte inferior a la lis para hacer el flujo de los elementos de izquierda a derecha más evidente.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by: