Comment puis-je afficher les éléments d'une liste verticalement sous forme de colonnes en utilisant CSS ?

Colonnes CSS : affichage vertical des éléments de liste

En réponse au défi de l'affichage vertical des éléments de liste sous forme de colonnes, nous nous tournons vers les colonnes CSS3. Cette fonctionnalité nous permet d'obtenir sans effort la mise en page souhaitée.

Considérez le code HTML suivant :

<div>

Maintenant, nous allons ajouter du CSS pour le styliser :

#limheight {
    height: 800px; /* Fixed height */
    -webkit-column-count: 3; /* WebKit prefix */
    -moz-column-count: 3; /* Mozilla prefix */
    column-count: 3; /* Standard */
}

#limheight li {
    display: inline-block; /* Necessary for columns to work */
}

Avec les colonnes CSS, le nombre de colonnes spécifié (dans ce cas, 3) est créé automatiquement. Il ajuste dynamiquement la largeur des colonnes à mesure que le navigateur se redimensionne. Cela fournit l'alignement vertical souhaité des éléments de liste.

Profitez de la puissance des colonnes CSS pour améliorer vos mises en page réactives et afficher élégamment les éléments de liste sous forme de colonnes !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!