Maison > interface Web > tutoriel CSS > le corps du texte

Pourquoi les éléments de ma liste changent-ils après une réinitialisation CSS et comment puis-je corriger l'alignement ?

Mary-Kate Olsen
Libérer: 2024-11-25 21:53:12
original
633 Les gens l'ont consulté

Why Are My List Items Shifting After a CSS Reset, and How Can I Fix the Alignment?

Déplacement des éléments de la liste après la réinitialisation CSS : aligner les secondes lignes avec les puces

Après avoir utilisé une réinitialisation CSS, plusieurs utilisateurs ont rencontré un problème où le les deuxièmes lignes de texte dans les éléments de la liste (li) commencent sous la puce après un retour à la ligne. Ce désalignement visuel peut être corrigé en ajustant la propriété list-style-position de la balise li, en la définissant sur "outside".

Cependant, cette solution peut entraîner des problèmes d'indentation avec les puces. Pour résoudre ce problème, une propriété margin supplémentaire peut être appliquée à l'élément parent ul, garantissant ainsi l'alignement avec le texte en dehors de la liste.

Solution mise à jour (15 mars 2014) :

ul {
  list-style-position: outside;
  margin-left: 1em;
}
Copier après la connexion

Ce code fournit une solution plus raffinée, résolvant le problème d'indentation susmentionné et améliorant la lisibilité. La propriété margin est appliquée à l'élément ul, garantissant que la liste entière est en retrait, conservant ainsi un alignement correct avec le texte en dehors de la liste.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal