Pourquoi les deuxièmes lignes des éléments de ma liste sont-elles mises en retrait sous la puce plutôt qu'à côté ?

Deuxième ligne dans les retraits des éléments de liste après la puce

Dans cette question, un utilisateur rencontre des difficultés à aligner le texte dans sa liste après avoir appliqué un CSS réinitialiser. Plus précisément, la deuxième ligne de texte de chaque élément de la liste commence sous la puce, au lieu d'être mise en retrait à côté de celle-ci.

Le problème survient en raison de la propriété list-style-position de la balise li. Par défaut, cette propriété est définie sur « à l'intérieur », ce qui entraîne l'enroulement du texte autour de la puce. Pour aligner correctement le texte, nous devons définir list-style-position sur "outside".

Cependant, cela crée un nouveau problème : les puces sont désormais en dehors du conteneur de liste. Pour résoudre ce problème, nous pouvons appliquer une indentation en marge gauche à la liste pour aligner les puces avec le texte en dehors de la liste.

Voici la solution CSS :

ul {
  list-style-position: outside;
  margin-left: 1em;
}

Ce code définit le position de style liste sur "à l'extérieur" pour aligner le texte avec la puce et applique une indentation à la liste pour l'aligner avec l'autre texte de la page.

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!