Comment afficher horizontalement les éléments de liste non ordonnés à l'aide de CSS ?

Comment afficher une liste non ordonnée horizontalement sur une ligne

Vous pouvez utiliser CSS pour formater les éléments HTML de différentes manières. Une tâche de style courante consiste à organiser les éléments de la liste horizontalement plutôt que verticalement. Cet article explique comment obtenir cet effet à l'aide de la propriété display.

Problème

Comment puis-je faire apparaître les éléments d'une liste horizontalement dans une rangée à l'aide de CSS ?

Solution

Les éléments de liste sont généralement des éléments de bloc, ce qui signifie qu'ils s'affichent sur leur propre ligne. Pour les faire circuler horizontalement, vous devez les remplacer par des éléments en ligne. Cela se fait à l'aide de la propriété display :

#ul_top_hypers li {
  display: inline;
}

Dans votre code initial, vous aviez appliqué la propriété display: inline à l'élément ul lui-même. Toutefois, cela n’affecte que la liste globale et non les éléments individuels de la liste. Pour que les éléments de la liste s'affichent horizontalement, vous devez utiliser un sélecteur de contexte pour leur appliquer spécifiquement la propriété display: inline.

Exemple de travail

Voici un extrait mis à jour qui montre comment afficher lister les éléments horizontalement dans une rangée :

<div>

#div_top_hypers {
  background-color: #eeeeee;
  display: inline;
}

#ul_top_hypers li {
  display: inline;
}

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!