html css - comment créer une liste à colonnes multiples ?

Question

J'ai une "liste ordonnée" qui contient environ 100 "éléments de liste". Cette liste rend ma page très longue et les utilisateurs doivent faire défiler la page trop souvent.

Comment puis-je faire en sorte que l'UL s'affiche comme ceci :

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

Answer 1

Si pour vous l'ordre vertical ne compte pas, mais seulement la mise en page :

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

Vous pouvez simplement définir les éléments li de cette manière :

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

Cela devrait fonctionner. Si vous avez besoin de les avoir en ordre vertical, vous devez agir dans le php script en les divs séparés et ensuite les flotter.

Answer 2

Vous pourriez utiliser Module de colonnes css3 mais attention, c'est pas entièrement pris en charge par tous les navigateurs web .

Answer 3

Il y avait un article sur A List Apart il y a quelque temps, qui traitait exactement de cette question. Je suppose que si ce qui y est mentionné ne suffit pas, vous pouvez bien sûr toujours recourir au codage côté serveur ou côté client pour diviser automatiquement la liste en trois parties.

Answer 4

J'ai pu obtenir le bon ordonnancement avec un peu 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
}

styles de base pour .liCol :

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

Answer 5

J'ai créé une solution qui fonctionne également pour les listes ordonnées (numérotées). Ces listes doivent continuer à être numérotées dans les colonnes.

Ajoutez le script suivant à votre page (peu importe l'endroit, le mieux est dans un fichier js séparé) :

<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>

Ensuite, vous pouvez simplement créer des listes à colonnes multiples comme ceci :

<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>

Donc, il suffit de définir class="cols" et rel="[number_of_columns]" et le script fera le reste !