Réduire l’écart entre une puce et du texte dans un élément de liste

Comment puis-je réduire l’écart par défaut entre la puce et le texte dans un

  • ?

    • Objet 1
    • Point 2
    • Article 3

    Je veux réduire l’écart entre la balle et “je”.

    Je ne suis pas sûr que ce soit la meilleure façon de le faire, mais vous pouvez spécifier un text-indent négatif:

     li { text-indent: -4px; } 

    … à quoi ressemble votre code HTML:

     
    • Item 1
    • Item 2

    (Testé dans Safari 4.0.4 et Firefox 3.0.11.)

  • Pour ce faire, définissez le type de list-style-type sur none et définissez l’ background-image d’ background-image d’un élément de liste sur une puce générique, comme ceci:

     ul { list-style-type: none; } li { background-image: url(bullet.jpg); background-repeat: no-repeat; background-position: 0px 50%; padding-left: 7px; } 

    Le résultat ressemblerait un peu à ceci:

    texte alt

    Avec cette approche, vous n’ajoutez pas d’éléments span (ou autres) inutiles à vos listes, ce qui est sans doute plus pratique (pour une extension ultérieure et d’autres raisons sémantiques).

    Vous pouvez essayer ce qui suit. Mais il vous faut mettre un élément dans les éléments

  •       
    • Coffee
    • Tea
    • Coca Cola

    J’ai essayé ces solutions et d’autres solutions proposées, qui ne fonctionnent pas, mais je semble avoir trouvé un moyen d’y parvenir, à savoir supprimer la puce et utiliser le pseudo-élément: before pour insérer une puce Unicode. Sa place. Vous pouvez ensuite ajuster l’espace entre l’élément de liste et la puce. Vous devez utiliser Unicode pour insérer une entité dans la propriété content de: before ou: after – les entités HTML ne fonctionnent pas.

    Un code de dimensionnement et de positionnement est également nécessaire, car la puce Unicode affiche par défaut la taille d’une tête d’épingle. Donc, la balle doit être agrandie et absolument positionnée pour la mettre en place. Notez l’utilisation de ems pour le dimensionnement et le positionnement de la puce afin que la relation entre la puce et l’élément de liste rest constante lorsque vous modifiez la taille de police de l’élément de liste. Les commentaires dans le code expliquent comment tout cela fonctionne. Si vous souhaitez utiliser une entité différente, vous pouvez trouver une liste des entités Unicode ici:

    http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/

    Utilisez une valeur de la colonne la plus à droite (octal) du tableau de cette page – vous avez juste besoin du \ et du nombre. Vous devriez être capable de supprimer tout sauf la propriété content de la règle: before lorsque vous utilisez les autres entités car elles semblent afficher une taille utilisable. Envoyez-moi un courriel: charles at stylinwithcss dot com avec des pensées / commentaires. Je l’ai testé Firefox, Chrome et Safari et ça marche bien.

      body { font-family:"Trebuchet MS", sans-serif; } li { font-size:14px; /* set font size of list item and bullet here */ list-style-type:none; /* removes default bullet */ position:relative; /* positioning context for bullet */ } li:before { content:"\2219"; /* escaped unicode character */ font-size:2.5em; /* the default unicode bullet size is very small */ line-height:0; /* kills huge line height on resized bullet */ position:absolute; /* position bullet relative to list item */ top:.23em; /* vertical align bullet position relative to list item */ left:-.5em; /* position the bullet L- R relative to list item */ } 

    Si dans chaque li vous n’avez qu’une seule ligne de texte, vous pouvez mettre le retrait de texte sur li. Comme ça :

     ul { list-style: disc; } ul li { text-indent: 5px; } 

    ou

     ul { list-style: disc; } ul li { text-indent: -5px; } 

    C’est un moyen.

      li span { margin-left: -11px; } 
    • 1
    • 2
    • 3
    • 4

    Vous pourriez essayer d’utiliser:

     li {list-style-position: inside; } 

    Mais je ne me souviens pas si cela ajuste l’ espace ou si l’espace change.


    Édité

    Ce qui précède ne semble pas faire de différence substantielle. Il ne semble pas y avoir de moyen de réduire l’espace entre le marqueur de list-style-type et le texte, même s’il peut être augmenté en utilisant margin-left ou text-indent .

    Désolé je ne peux pas être plus utile.


    Édité

    Juste par curiosité, pourquoi ne pas «simuler» la balle avec une image de fond?

     ul {list-style-type: none; margin: 0; padding: 0; } ul li {background: #fff url(path/to/bullet-image.png) 0 50% no-repeat; margin: 0; padding: 0 0 0 10px; /* change 10px to whatever you feel best suits you */ } 

    Cela pourrait permettre un meilleur réglage.

    Je devais faire cela en ligne et en combiner quelques-unes pour que cela fonctionne correctement pour moi. Je travaille dans une division et je voulais utiliser une image:

    Le padding sous UL a indiqué à la balle où commencer à partir de la marge gauche de la div dans laquelle elle se trouve. Je l’utilise pour une meilleure accessibilité / flexibilité, mais vous pouvez également utiliser px. S’il ne semble pas bouger beaucoup avec px, utilisez une valeur px beaucoup plus grande (pour moi, le simple fait de le déplacer en cm était de 60px!).

    L’indentation du texte indique à quelle balle se rapprocher du texte.

    J’espère que ça marche pour toi! 🙂

    Réduire le text-indent de text-indent à un nombre négatif pour réduire l’espace entre la puce de l’élément de liste et son texte.

     li { text-indent: -4px; } 

    Vous pouvez également utiliser margin-left pour ajuster tout espace entre la puce de l’élément de liste et le bord de l’élément qui l’entoure.

     li { margin-left: 24px; } 

    Text text-indent et padding-left peuvent tous deux append de l’ espace entre la puce et le texte, mais seul text-indent peut réduire l’espace en négatif.

    li {padding-left: -4px; } / * Ne fonctionne pas. * /

    J’ai dans les

  • s.

    Pour les éléments

      , appliquez les CSS suivantes:

       ul { margin: 0; padding: 0; list-style: none; } 

      Pour les éléments , appliquez les CSS suivantes:

       a:before { content: ""; height: 6px; width: 6px; border-radius: 50%; background: #000; display: inline-block; margin: 0 6px 0 0; vertical-align: middle; } 

      Cela crée des pseudo-éléments pour les puces. Ils peuvent être stylisés comme tous les autres éléments.

      Je l’ai implémenté ici: http://www.cssdesk.com/R2AvX

      Ici vous allez avec le violon:

      VIOLON

      HTML:

       
      1. List 1
        1. Sub-Chapter
        2. Sub-Chapter
      2. List 2
        1. Sub-Chapter
        2. Sub-Chapter
      3. List 3

      CSS:

       ol {counter-reset:item;} ol li {display:block;} li:before {content:counters(item, ".");counter-increment:item;left:-7px;position:relative;font-weight:bold;} 

      Voici comment le faire.

      Multi-line fonctionne parfaitement si vous le faites de cette façon. Bullet taille automatiquement avec le texte. L’indent est simple: c’est juste le padding-left sur le li . CSS minimum requirejs.

       ul { margin: 0; padding: 0; list-style-type: none; } ul > li { position: relative; padding-left: 12px; } ul > li:before { content: "•"; position: absolute; left: 0; } div { border: 1px solid #ccc; } 
       
      • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, explicabo iste numquam dolorem harum natus! Voluptate magni expedita, eaque voluptates, aliquam maiores vel quia repellat a ipsum possimus eveniet, blanditiis.
      • Repudiandae repellendus laboriosam, odio vero debitis non quisquam provident deserunt, ratione facilis suscipit delectus sunt aliquid, in maxime autem optio, exercitationem iusto fugiat itaque omnis assumenda est a praesentium? Natus?
      • Voluptatem, distinctio, eius, soluta, atque laboriosam tempora magnam sequi saepe architecto accusamus hic facilis! Tenetur, necessitatibus. Ut ipsam, officia omnis obcaecati vero consectetur vel similique nam consequatur quidem at doloremque.

      Pour obtenir le look que je voulais, j’ai créé une div contenant une base UL et plusieurs LI. Je ne pouvais pas facilement ajuster le retrait entre la puce et le texte avec l’une des idées suggérées ci-dessus (techniquement possible, mais pas simple.) Je viens de quitter UL et LI sans aucune fonctionnalité de listage (type list-style-type: none ) append un au début de chaque ligne. Au début, cela m’a causé quelques soucis, il n’a affiché que la première puce, alors j’ai ajouté une puce à la fin de la première ligne, puis je l’ai rafraîchi, puis je l’ai enlevé. Ajoutez manuellement une entité HTML à puce si vous ne voulez pas une indentation énorme, ajoutez des entités HTML si vous voulez plus d’espace: o Je sais que ce n’est pas la meilleure méthode, mais cela a fonctionné pour moi.

      Voici encore une autre façon.

      1. Ajoutez deux div à chaque li, une pour la puce, une pour le texte.
      2. Mettez une puce (ou ce que vous voulez, Unicode en a plein) dans la puce. Placez le texte dans le div du texte.
      3. Définissez chaque li pour display:flex .

      Avantages:

      • Aucune image de balle supplémentaire à append.
      • Pas de marges négatives ou quoi que ce soit, ne vont pas à l’extérieur de la société mère.
      • Fonctionne sur tout navigateur prenant en charge flexbox.
      • Indentation correcte des articles multilignes.
      • L’utilisation d’un caractère de puce signifie que la puce sera toujours alignée verticalement sur le texte, sans modifications.

      Les inconvénients:

      • Nécessite des éléments supplémentaires.

      De plus, si vous ne voulez pas coder manuellement tous les div supplémentaires, vous pouvez simplement créer une liste normale et ensuite exécuter cette fonction pour la transformer, en passant votre ul comme paramètre:

       function fixList (theList) { theList.find('li').each(function (_, li) { li = $(li); $('
      ').html(li.html()).appendTo(li.empty()); $('
      ').text('•').prependTo(li); }); }

      Exemple:

       li { font-family: sans-serif; list-style-type: none; display: flex; } li > div:first-child { margin-right: 0.75ex; /* set to desired spacing */ } 
       
      • First list item.
      • Second list item.
        It's on two lines.
      • Third list item.