Comment afficher une liste non ordonnée horizontalement en CSS ?

Comment faire un

Afficher dans une ligne horizontale

En CSS, les éléments de liste sont généralement affichés sous forme d'éléments de bloc, ce qui signifie qu'ils s'étendent sur toute la largeur de leur conteneur. Cependant, vous souhaiterez peut-être que les éléments de votre liste apparaissent horizontalement dans une rangée. Pour y parvenir, suivez ces étapes :

1. Affichage de l'outil : en ligne ; sur les éléments de la liste

Pour que les éléments de la liste s'affichent en ligne, vous devez appliquer l'affichage : inline ; des biens pour eux. Cependant, en appliquant directement cette propriété au

l’élément n’aura aucun effet. Utilisez plutôt des sélecteurs de contexte pour cibler les éléments de la liste dans
 :

#ul_top_hypers li {
    display: inline;
}

2. Ajuster le conteneur parent (facultatif)

Dans le code fourni, le conteneur parent (#div_top_hypers) a également display: inline; appliqué. Bien que cela ne soit pas nécessaire pour l'affichage horizontal des éléments de liste, cela peut empêcher un comportement indésirable dans certains cas.

Exemple

L'extrait de code suivant démontre la mise en œuvre de ces éléments étapes :

#div_top_hypers {
    background-color:#eeeeee;
}

#ul_top_hypers li {
    display: inline;
}

<div>

En suivant ces étapes, vous pouvez facilement faire apparaître les éléments de votre liste sur une ligne horizontale en utilisant CSS.

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!