Comment réparer les secondes lignes mal alignées dans les éléments de liste multilignes ?

Élément Li sur deux lignes : remédier au désalignement sur la deuxième ligne

Lorsque vous travaillez avec des listes non ordonnées, vous pouvez rencontrer un scénario dans lequel une liste l'élément s'enroule sur une deuxième ligne, ce qui entraîne le décalage de la deuxième ligne par rapport à la première. Ce désalignement peut perturber l'esthétique visuelle de votre liste.

Dans l'exemple fourni, le code HTML suivant a été utilisé pour créer la liste :

<ul>
  <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
  <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
  <li><i class="fa fa-check fa-fw"></i>This is a list item that actually takes up 2 lines. Looks ugly</li>
</ul>

Le problème se pose car l'icône de coche ( ) est un contenu en ligne. Lorsque le texte revient à la ligne, l'icône reste sur la même ligne, ce qui entraîne un désalignement de la deuxième ligne.

Pour résoudre ce problème, vous pouvez utiliser la propriété text-indent, qui spécifie la quantité d'espace horizontal restant. avant la première ligne de texte d'un élément. En définissant une valeur de retrait de texte négative, vous pouvez décaler la première ligne vers la gauche, en l'alignant avec les lignes suivantes.

li {
  text-indent: -1.28571429em;
}

Pour compenser le retrait négatif, vous pouvez appliquer un remplissage positif au element :

li {
  padding-left: 1.28571429em;
}

En appliquant ces styles, vous pouvez aligner la deuxième ligne de l'élément de liste avec la première, ce qui entraîne une présentation visuelle plus cohérente.

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!