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

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

Linda Hamilton
Libérer: 2024-12-11 15:39:16
original
346 Les gens l'ont consulté

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

CSS : Réguler la distance entre les puces et les éléments de la liste

Problème :

Ajuster l'espacement horizontal entre les puces et leurs correspondant

  • les éléments dans une liste ordonnée ou non ordonnée posent un défi. Pour illustrer, considérons ce qui suit :

    * Some list text goes
       here.
    Copier après la connexion

    Résultat souhaité :

    Modifier l'espace pour obtenir :

    *         Some list text goes
              here.
    Copier après la connexion

    ou

    *Some list text goes
     here.
    Copier après la connexion

    Solution :

    Entourez le contenu de l'élément de liste dans un élément span avec un positionnement relatif. La propriété gauche de la travée peut être manipulée pour contrôler l'espacement souhaité.

    li span {
      position: relative;
      left: -10px;
    }
    Copier après la connexion
    <ul>
      <li><span>item 1</span></li>
      <li><span>item 2</span></li>
      <li><span>item 3</span></li>
    </ul>
    Copier après la connexion

    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