Maison >interface Web >tutoriel CSS >Comment puis-je contrôler l'espacement horizontal entre les puces et les éléments de liste en CSS ?

Comment puis-je contrôler l'espacement horizontal entre les puces et les éléments de liste en CSS ?

Susan Sarandon
Susan Sarandonoriginal
2024-12-08 18:17:11581parcourir

How Can I Control the Horizontal Spacing Between Bullets and List Items in CSS?

Contrôle de l'espace horizontal entre les puces et
  • en CSS
  • Lors de l'utilisation de listes ordonnées ou non (

      ou
        ), vous souhaiterez peut-être modifier la quantité d'espace horizontal qu'occupe une puce avant son
      • associé. Par défaut, les puces créent une indentation cohérente. Cependant, vous pouvez personnaliser cet espacement selon vos besoins.

        Pour répondre à votre requête, la réponse réside dans l'utilisation d'un élément span avec un positionnement relatif. Entourez le contenu dans une étendue et appliquez la propriété « gauche » pour ajuster l'espacement.

        li span {
          position: relative;
          left: -10px;  /* Adjust this value to control the spacing */
        }

        Par exemple, pour créer un espace supplémentaire avant le texte, vous pouvez implémenter ce qui suit :

        <ul>
          <li><span>item 1</span></li>
          <li><span>item 2</span></li>
          <li><span>item 3</span></li>
        </ul>

        Cette approche vous permet d'affiner l'espacement horizontal entre les puces et

      • éléments, offrant une plus grande flexibilité dans la conception de votre 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!

    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