Comment afficher horizontalement les éléments de la liste à l'aide de CSS ?

Comment créer un <ul> Afficher dans une ligne horizontale

En HTML, les éléments de liste sont généralement affichés sous forme d'éléments de bloc, ce qui signifie qu'ils apparaissent les uns sur les autres. Cependant, vous pouvez utiliser CSS pour modifier la propriété d'affichage des éléments de liste en ligne, ce qui les fera afficher côte à côte sur la même ligne.

Pour modifier la propriété d'affichage des éléments de liste, vous pouvez utilisez la règle CSS suivante :

li {
    display: inline;
}

Vous pouvez également utiliser un sélecteur de contexte pour appliquer la propriété d'affichage en ligne afin de répertorier les éléments d'un <ul> élément, comme ceci :

#ul-id li {
    display: inline;
}

Voici un exemple d'utilisation de la propriété d'affichage en ligne pour créer un élément <ul> afficher dans une ligne horizontale :

<ul>

#ul-id {
    display: inline;
}

#ul-id li {
    display: inline;
}

Ce code donnera le résultat suivant :

Item 1 Item 2 Item 3

Comme vous pouvez le voir, les éléments de la liste sont désormais affichés dans une ligne horizontale rangée.

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!