Comment aligner la deuxième ligne d'un élément de liste à deux lignes en CSS ?

Élément Li sur deux lignes avec une deuxième ligne alignée

Dans une liste non ordonnée, vous pouvez rencontrer un long élément de liste qui s'étend sur deux lignes, mais la deuxième ligne n'est pas alignée avec la première. Pour résoudre ce désalignement, utilisez la propriété text-indent.

La propriété text-indent spécifie l'espace horizontal avant la première ligne de contenu textuel dans un élément. En spécifiant une valeur de retrait de texte négative, vous pouvez décaler la première ligne d'un certain montant vers la gauche. Pour contrebalancer ce décalage, appliquez une valeur padding-left positive.

Dans l'exemple de code fourni, la classe .fa-fw a une largeur de 1,28571429em. Pour aligner la deuxième ligne, nous définissons le retrait de texte de l'élément li sur -1,28571429em et le remplissage gauche sur 1,28571429em. Cela annule le décalage, ce qui entraîne une deuxième ligne alignée à gauche.

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

La mise en œuvre de cette solution garantit que la deuxième ligne de l'élément de liste longue s'aligne avec la première ligne, créant ainsi une liste non ordonnée visuellement équilibré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!