web-dev-qa-db-fra.com

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 <li>?

  • Objet 1
  • Point 2
  • Point 3

Je veux réduire l'écart entre la balle et le "je".

csshtml-lists
61
Jitendra Vyas

Je ne sais pas si c'est la meilleure façon de le faire, mais vous pouvez spécifier un négatif text-indent :

li {
    text-indent: -4px;
}

... à quoi ressemble votre code HTML:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

(Testé dans Safari 4.0.4 et Firefox 3.0.11.)

31
Steve Harrison

Vous pouvez y parvenir en définissant le list-style-type à none et en définissant background-image d'un élément de liste à 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 à quelque chose comme ceci:

alt text

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 extensibilité ultérieure et d'autres raisons sémantiques).

30
gpmcadam

Vous pouvez essayer ce qui suit. Mais cela vous oblige à mettre un <span> élément à l'intérieur du <li> éléments

<html>
<head>
<style type="text/css">
ul.a li span{
position:relative;
left:-0.5em;

}
</style>
</head>

<body>

<ul class="a">
  <li><span>Coffee</span></li>
  <li><span>Tea</span></li>
  <li><span>Coca Cola</span></li>
</ul>
</body>
</html>
21
Jaime Garcia

J'ai essayé ces solutions et d'autres proposées, qui ne fonctionnent pas réellement, mais il me semble avoir trouvé un moyen de le faire, à savoir supprimer la puce et utiliser le pseudo-élément: before pour insérer une puce Unicode dans Sa place. Ensuite, vous pouvez 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é de contenu de: avant ou: après - 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. Il faut donc agrandir la balle et la positionner absolument pour la mettre en place. Notez l'utilisation d'ems pour le dimensionnement et le positionnement de la puce afin que la relation de la puce avec l'élément de liste reste 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 autre entité, 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 (octale) du tableau de cette page - vous avez juste besoin du\et du nombre. Vous devriez être en mesure de supprimer tous les éléments, à l'exception de la propriété content de la règle: before lorsque vous utilisez les autres entités car elles semblent s'afficher à une taille utilisable. Envoyez-moi un courriel: charles at stylinwithcss dot com avec toutes vos pensées/commentaires. Je l'ai testé Firefox, Chrome et Safari et cela fonctionne 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 */
       }
20
Charles Wyke-Smith

Si dans chaque li vous n'avez qu'une seule ligne de texte, vous pouvez mettre un 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;
}
6
Bogdana Zadic

C'est une façon.

    li span {
        margin-left: -11px;
    }

<ul>
    <li><span>1</span></li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
4
mark123

J'avais besoin de faire cela en ligne et j'ai combiné quelques-uns des éléments ci-dessus pour que cela fonctionne bien pour moi. Je travaille à l'intérieur d'un div et je voulais utiliser une image:

Le rembourrage sous l'UL a indiqué à la balle par où commencer à partir de la marge gauche de la division où elle se trouve. Je les 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 déplacer dans un cm était de 60 pixels!).

Le retrait de texte indique à la puce à quelle distance se trouver le texte à côté.

J'espère que ça marche pour toi! :)

2
libellus

Réduire 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 aussi utiliser margin-left pour ajuster tout espace entre la puce de l'élément de liste et le bord de son élément environnant.

li {
  margin-left: 24px;
}

Tous les deux text-indent et padding-left peut ajouter espace entre la puce et le texte, mais seulement text-indent peut réduire l'espace à négatif.

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

Voici comment procéder.

Multi-line fonctionne parfaitement si vous le faites de cette façon. La puce sera automatiquement dimensionnée avec du texte. Le retrait est simple: c'est juste le padding-left sur le li. CSS minimal requis.

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;
}
<div>
  <ul>
    <li>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.</li>
    <li>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?</li>
    <li>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.</li>
  </ul>
</div>
1
mpen

J'ai <a> à l'intérieur de <li>s.

Au <ul> éléments, appliquez le CSS suivant:

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

Au <a> éléments, appliquez le CSS suivant:

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 stylés comme tout autre élément.

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

1
Hitesh

Ici vous allez avec Fiddle:

VIOLON

HTML: 

<ol>
        <li>List 1          
            <ol>
                <li>Sub-Chapter</li>
                <li>Sub-Chapter</li>
            </ol>
        </li>
        <li>List 2
            <ol>
                <li>Sub-Chapter</li>
                <li>Sub-Chapter</li>
            </ol>
        </li>
        <li>List 3</li>
</ol>

CSS: 

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

Voici encore une autre façon.

  1. Ajoutez deux div à chaque li, un pour la puce, un pour le texte.
  2. Mettez un caractère de puce • (ou ce que vous voulez, Unicode en a plein) dans la div des puces. Mettez le texte dans le texte div.
  3. Réglez chaque li sur display:flex.

Avantages:

  • Aucune image de puce supplémentaire à ajouter.
  • Aucune marge négative ou quoi que ce soit, ne sortira pas du parent.
  • Fonctionne sur n'importe quel navigateur prenant en charge Flexbox.
  • Indentation appropriée des éléments multilignes.
  • L'utilisation du caractère de puce signifie que la puce sera toujours correctement alignée verticalement avec le texte, aucun ajustement nécessaire.

Les inconvénients:

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

De plus, si vous ne voulez pas coder manuellement toutes les divs supplémentaires, vous pouvez simplement créer une liste normale, puis 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);
    $('<div/>').html(li.html()).appendTo(li.empty());
    $('<div/>').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 */
}
<ul>
  <li><div>•</div><div>First list item.</div>
  <li><div>•</div><div>Second list item.<br>It's on two lines.</div>
  <li><div>•</div><div>Third <i>list</i> item.</div>
</ul>

Voici un exemple d'utilisation de la fonction:

fixList($('ul'));

function fixList (theList) {
  $('li', theList).each(function (_, li) {
    li = $(li);
    $('<div/>').html(li.html()).appendTo(li.empty());
    $('<div/>').text('•').prependTo(li);
  });
}
li {
  font-family: sans-serif;
  list-style-type: none;
  display: flex;
}

li > div:first-child {
  margin-right: 0.75ex;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>First list item.
  <li>Second list item.<br>It's on two lines.
  <li>Third <i>list</i> item.
</ul>
0
Jason C

Pour obtenir le look que je voulais, j'ai fait un div contenant un UL de base 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 liste (list-style-type: none) puis en ajoutant un &bull; au début de chaque ligne. Cela m'a donné un peu de mal au début, il n'affichait que la première puce, alors j'ai ajouté un caractère de puce à la fin de la première ligne, actualisé, puis supprimé et ils sont tous apparus. Ajoutez simplement une entité HTML à puce si vous ne voulez pas un retrait important, ajoutez des entités HTML d'espace si vous voulez plus d'espace: o Je sais que ce n'est pas la meilleure méthode, mais cela a fonctionné pour moi.

0
Keiome