Maison >interface Web >tutoriel CSS >Comment réparer les secondes lignes mal alignées dans les listes non ordonnées après une réinitialisation CSS ?

Comment réparer les secondes lignes mal alignées dans les listes non ordonnées après une réinitialisation CSS ?

DDD
DDDoriginal
2024-11-25 17:25:131015parcourir

How to Fix Misaligned Second Lines in Unordered Lists After a CSS Reset?

Résolution de l'alignement de la deuxième ligne dans les listes ul après la réinitialisation CSS

Après avoir appliqué la réinitialisation CSS, vous pouvez rencontrer un problème où la deuxième ligne de texte dans les éléments de liste commence sous le balle. Ce désalignement peut être résolu via CSS en ajustant la propriété list-style-position.

Solution :

La propriété list-style-position détermine si les puces apparaissent à l'intérieur ou à l'extérieur de la liste. Par défaut, il est défini sur « à l'intérieur », ce qui entraîne l'enroulement du texte autour des puces. Le changer en "extérieur" force le texte à s'aligner sur le reste de la liste.

Cependant, cela peut entraîner un désalignement entre les puces et le texte en dehors de la liste. Pour résoudre ce problème, appliquez une marge aux éléments de la liste :

ul li {
  list-style-position: outside;
  margin-left: 1em;
}

Solution améliorée (mise à jour de mars 2014) :

ul {
  list-style-position: outside;
  margin-left: 1em;
}
  • Cette solution applique toutes les propriétés à l'élément ul .
  • Les unités em sont utilisées pour l'indentation, garantissant un espacement multiplateforme cohérent.
  • Clair et concis les commentaires expliquent la fonction de chaque propriété.

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!

Déclaration:
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