Comment aligner les éléments d'une liste à deux lignes avec des secondes lignes mal alignées ?

Article Li sur deux lignes. La deuxième ligne n'a pas de marge

Lorsqu'il s'agit d'un élément de liste qui s'étend sur deux lignes, de telle sorte que la deuxième ligne n'est pas alignée avec la première, il devient nécessaire de mettre en œuvre un alignement. Cette situation se produit principalement parce que les éléments en ligne dans une liste permettent au texte suivant de s'écouler sans affecter son alignement.

Pour résoudre ce problème, il est possible d'exploiter la propriété 'text-indent'. Cette propriété contrôle l'espacement avant le début de la première ligne du texte dans un élément. En appliquant une valeur « text-indent » négative, la première ligne peut être décalée d'un montant spécifique vers la gauche. Ce déplacement peut ensuite être compensé par une valeur « padding-left » positive, ce qui entraîne l'alignement souhaité.

Considérez cet exemple :

ul {
  width: 300px;
}
li {
  padding-left: 1.28571429em;
  text-indent: -1.28571429em;
}

Dans cet exemple, le « 1.28571429em » La valeur correspond à la largeur de l'élément icône 'font-awesome' responsable de la coche. L'utilisation de cette technique permet au texte de s'aligner sous l'icône sur les deux lignes, corrigeant ainsi le désalignement.

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!