¿Cómo crear una lista de varias columnas?

6 minutos de lectura

avatar de usuario de anónimo
anónimo

Tengo una “Lista ordenada” que contiene alrededor de 100 “Elementos de lista”. Este viejo hace que mi página sea muy larga y los usuarios tienen que desplazarse demasiado.

¿Cómo puedo hacer que la UL se muestre así:

1.           6.           11.
2.           7.           12.
3.           8.           13.
4.           9.           14.
5.          10.           15.

Avatar de usuario de Enrico Carlesso
enrico carlesso

Si no te importa el orden vertical, sino solo el diseño:

1.      2.      3.       4.
5.      6.      7.       8.
9.      10.     11.      12.

Simplemente puede configurar los elementos li de esta manera:

li {
    display: block;
    width: 25%;
    float: left;
}

Deberia de funcionar. Si necesita tenerlos en orden vertical, debe actuar en el script php dividiéndolos en divs separados y luego flotarlos.

  • ¿Hay alguna forma en que pueda obtenerlos en orden vertical usando css/html? sin tener que separarlos?

    – anónimo

    27 de febrero de 2010 a las 11:14

  • Que yo sepa, no. Como se mencionó, cuando se admita el modo de columna css3, será una tarea fácil, pero cada truco que me pregunto necesita dividir la página de alguna manera.

    – Enrico Carlesso

    27 de febrero de 2010 a las 13:04

  • parece haber un problema si, por ejemplo, el artículo 3 tiene 2 líneas de alto y los artículos 4 tienen 5 líneas de alto, etc., entonces habrá grandes espacios entre el artículo 1 y el artículo 5, mientras que la disposición vertical puede tener siempre 1 línea vacía entre el artículo 1 y el artículo 5

    – no polaridad

    07/08/2013 a las 22:47

Avatar de usuario de Knu
knu

Podrías usar el Módulo de diseño de varias columnas CSS. Puedes consultar el soporte en Puedo usar.

  • ¿podría proporcionar un ejemplo de trabajo usando el módulo de columna css3?

    – Santosh

    23 de abril de 2014 a las 13:35

  • Mi problema con las columnas css3 es que no se alinean muy bien en la parte superior. Terminé haciéndolo con jquery: jsfiddle.net/EebVF/5 Usando este complemento jquery: github.com/fzondlo/jquery-columnas

    – nuevoNombreDeUsuarioAquí

    3 mayo 2014 a las 14:10

Había un artículo sobre A List Apart hace un tiempo que cubría exactamente esta pregunta. Supongo que si lo que se menciona allí no es suficiente, por supuesto, siempre puede volver a la codificación del lado del servidor o la codificación del lado del cliente para dividir la lista automáticamente en tres partes.

Pude obtener el pedido adecuado con un poco de jQuery:

function splitList($list, n) {
    var i, k;
    var colHeight = Math.ceil($list.children().length / n)
    var colWidth = Math.floor(100 / n) + "%"

    for (i = 0; i < n; i++) {
        $list.append("<ul class="liCol"></ul>")
        for (k = 0; k < colHeight; k++) {
            $list.children("li").eq(0).appendTo(".liCol:last")          
        }   
    }

    $(".liCol").css("width", colWidth)
    $list.show() // list originally hidden to avoid displaying before ready
}

estilos básicos para .liCol:

.liCol {
    padding: 0px;
    margin: 0px;
    float: left;
}

Avatar de usuario de VoVaVc
VoVaVc

Si usa el diseño de varias columnas CSS, puede hacerlo de esta manera:

ul {
    list-style-type: none;
    counter-reset: section;
    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
    column-count: 3;
    column-gap: 20px;
}

ul li {
    padding-left: 30px;
    position: relative;
}

ul li:before {
    counter-increment: section;
    content: counter(section) ".";
    margin: 0 0 0 -34px;
    text-align: right;
    width: 2em;
    display: inline-block;
    position: absolute;
    height: 100%;
}
<ul>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ul>

demostración de JSFiddle

  • El soporte es mucho más amplio hoy en día.[caniuse.com/#feat=multicolumn] y los navegadores antiguos seguirán mostrando la lista. De hecho podrías combinar esta técnica con esta otra [stackoverflow.com/a/2347094/2817112] para una buena alternativa.

    – Oriol

    02/03/2015 a las 21:23

Avatar de usuario de Herman
Germán

Creé una solución que también funciona para listas ordenadas (numeradas). Estas listas tienen que seguir numerándose a través de las columnas.

Agregue el siguiente script a su página (no importa dónde, lo mejor es en un archivo js separado):

<script type="text/javascript">
// As soon as the document's structure has been loaded:
document.addEventListener( "DOMContentLoaded", function() {
    // For each html elem:
    elems = document.getElementsByTagName("*"); // OL and UL wanted: chose all (*) here and select later.
    for ( var e = 0; e < elems.length; e++ ) {
        // Check if elem is a list (ordered/unordered) and has class name "cols":
        if ( ( elems[e].tagName == "OL" || elems[e].tagName == "UL" ) && elems[e].className.search("cols") > -1 ) {
            // Collect list items and number of columns (from the rel attribute):
            var list = elems[e];
            var listItems = list.getElementsByTagName("LI");
            var Ncols = list.getAttribute("rel")*1; // *1 converts rel from string to int.
            // Determine total number of items, items per column and column width:
            var Ntotal = listItems.length;
            var Npercol = Math.ceil( Ntotal/Ncols );
            var colWidth = Math.floor( 100/Ncols )+"%";
            // For each column:
            for ( var c = 0; c < Ncols; c++ ) {
                // Create column div:
                var colDiv = document.createElement("DIV");
                colDiv.style.cssFloat = "left";
                colDiv.style.width = colWidth;
                // Add list items to column div:
                var i_start = c*Npercol;
                var i_end = Math.min( (c+1)*Npercol, Ntotal );
                for ( var i = i_start; i < i_end; i++ )
                    colDiv.appendChild( listItems[0] ); // Using listItems[0] instead of listItems[i], because items are moved to colDiv!
                // Add column div to list:  
                list.appendChild( colDiv );
            }
        }
    }
} );
</script>

Luego, simplemente puede crear listas de varias columnas como esta:

<ol class="cols" rel="3">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
    <li>G</li>
</ol>

Entonces, configurando class=”cols” y rel=”[number_of_columns]¡y el guión hará el resto!

  • El soporte es mucho más amplio hoy en día.[caniuse.com/#feat=multicolumn] y los navegadores antiguos seguirán mostrando la lista. De hecho podrías combinar esta técnica con esta otra [stackoverflow.com/a/2347094/2817112] para una buena alternativa.

    – Oriol

    02/03/2015 a las 21:23

Avatar de usuario de la comunidad
Comunidad

Puede usar transformaciones 2D: tienen un soporte más amplio para los navegadores modernos que las columnas CSS3. Mira mi respuesta aquí

Diseño de elemento de 2 filas dentro de div horizontal

¿Ha sido útil esta solución?