Comment puis-je éliminer la marge sur la deuxième ligne d'un élément de liste à deux lignes ?

Élément Li sur deux lignes : élimination de la marge sur la deuxième ligne

Dans une liste non ordonnée, les utilisateurs rencontrent souvent un problème où les éléments de la liste s'allongent et s'étendent sur plusieurs lignes, créant une apparence inégale. Ce problème survient lorsque la deuxième ligne manque d’alignement et dépasse de la marge de la première ligne. Pour résoudre ce problème, nous exploiterons les propriétés CSS "text-indent" et "padding-left".

Comprendre Text-Indent et Padding-Left

"text-indent" spécifie la quantité d'espace horizontal laissé avant la première ligne de texte dans un élément. En employant une valeur négative, la première ligne peut être décalée vers la gauche. A l'inverse, "padding-left" contrôle l'espace entre le bord gauche de l'élément et son contenu. En appliquant une valeur positive, nous pouvons compenser l'indentation.

Mise en œuvre de la solution

Pour aligner la deuxième ligne avec la première, nous utilisons le code CSS suivant :

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

La valeur de "1.28571429em" est cruciale car elle correspond à la largeur de l'icône de coche utilisée par "font-géniale." En définissant un "text-indent" négatif et en l'annulant avec un "padding-left" positif, le texte de l'élément de liste est décalé vers la gauche tout en conservant la position de la coche.

Conclusion

Cette technique permet aux éléments de la liste de s'étendre verticalement sans compromettre leur alignement. En ajustant les propriétés « text-indent » et « padding-left », les développeurs peuvent affiner l'apparence de leurs listes non ordonnées, améliorant ainsi l'esthétique visuelle.

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!