CSS: espace de contrôle entre puce et <li>


177

Je voudrais contrôler combien d'espace horizontal une balle pousse <li>vers la droite dans un <ol>ou <ul>.

Autrement dit, au lieu d'avoir toujours

*  Some list text goes
   here.

J'aimerais pouvoir changer cela pour être

*         Some list text goes
          here.

ou

*Some list text goes
 here.

J'ai regardé autour de moi, mais je n'ai trouvé que des instructions pour déplacer tout le bloc vers la gauche ou la droite, par exemple http://www.alistapart.com/articles/taminglists/


Réponses:


161

Mettez son contenu dans un spanqui est relativement positionné, vous pouvez alors contrôler l'espace par la leftpropriété du span.

li span {
  position: relative;
  left: -10px;
}
<ul>
  <li><span>item 1</span></li>
  <li><span>item 2</span></li>
  <li><span>item 3</span></li>
</ul>


Juste pour clarifier, la balise <span> peut être sémantique quand une classe lui est assignée, par exemple <span class = "tel"> 123-456-7890 </span> est implicitement sémantique.
ingyhere

4
+1 pour avoir réellement répondu à la question du gars;) (bien que le span devrait idéalement dans la vie réelle avoir une classe de toute façon pour les bonnes pratiques de pérennité ainsi que la sémantique: si à l'avenir un développement de javascript ou de nouvelles fonctionnalités, etc. avait une bonne raison d'ajouter des délais supplémentaires à votre contenu, les choses pourraient devenir désordonnées)
user56reinstatemonica8

dans Firefox, le texte ne s'affiche pas correctement chevauche les balles en utilisant cette astuce
Jay Bhalodi

@ingyhere, je doute que ce soit vrai, car je ne trouve rien qui prouve cette affirmation. Pouvez-vous fournir des sources?
WoIIe

@Wolle Hmmm. C'est un vieux commentaire, et je ne suis pas sûr de la préoccupation - S'il s'agit de savoir si <SPAN>peut utiliser idouclass balises, jetez un coup d'œil au W3C . Si la question est de savoir si elle peut transmettre une signification sémantique, voyez cette réponse . Techniquement, la <SPAN>balise est un élément en ligne non sémantique en soi, mais d'une certaine manière qui offre plus de flexibilité dans sa réutilisation. De nos jours, je pense que l'on peut utiliser le inline-blockdescripteur pour permettre une plus grande gamme d'options de formatage.
ingyhere

120

Pour résumer les autres réponses ici - si vous voulez un contrôle plus fin sur l'espace entre les puces et le texte dans un <li>élément de liste, vos options sont:

(1) Utilisez une image d'arrière-plan:

<style type="text/css">
li {
    list-style-type:none;
    background-image:url(bullet.png);
}
</style>

<ul>
    <li>Some text</li>
</ul>

Avantages:

  • Vous pouvez utiliser n'importe quelle image de votre choix pour la puce
  • Vous pouvez utiliser CSS background-positionpour positionner l'image à peu près n'importe où par rapport au texte, en utilisant des pixels, des ems ou%

Désavantages:

  • Ajoute un fichier image supplémentaire (quoique petit) à votre page, augmentant ainsi le poids de la page
  • Si un utilisateur augmente la taille du texte sur son navigateur, la puce restera à sa taille d'origine. Il est également probable que la position augmente à mesure que la taille du texte augmente
  • Si vous développez une mise en page `` réactive '' en utilisant uniquement des pourcentages pour les largeurs, il peut être difficile d'obtenir la puce exactement où vous le souhaitez sur une plage de largeurs d'écran.

2. Utilisez un rembourrage sur l' <li>étiquette

<style type="text/css">
ul {padding-left:1em}
li {padding-left:1em}
</style>

<ul>
    <li>Some text</li>
</ul>

Avantages:

  • Aucune image = 1 fichier de moins à télécharger
  • En ajustant le remplissage sur le <li>, vous pouvez ajouter autant d' espace horizontal supplémentaire entre la puce et le texte que vous le souhaitez
  • Si l'utilisateur augmente la taille du texte, l'espacement et la taille des puces doivent être mis à l'échelle proportionnellement

Désavantages:

  • Impossible de rapprocher la puce du texte de la valeur par défaut du navigateur
  • Limité aux formes et aux tailles des types de puces intégrés de CSS
  • La puce doit être de la même couleur que le texte
  • Aucun contrôle sur le positionnement vertical de la balle

(3) Enveloppez le texte dans un <span>élément supplémentaire

<style type="text/css">
li {
    padding-left:1em;
    color:#f00; /* red bullet */
}
li span {
    display:block;
    margin-left:-0.5em;
    color:#000; /* black text */
}
</style>

<ul>
    <li><span>Some text</span></li>
</ul>

Avantages:

  • Aucune image = 1 fichier de moins à télécharger
  • Vous obtenez plus de contrôle sur la position de la puce qu'avec l'option (2) - vous pouvez la rapprocher du texte (bien que malgré tous mes efforts, il semble que vous ne puissiez pas modifier la position verticale en ajoutant padding-topau<span> . Quelqu'un d'autre peut avoir une solution de contournement pour cela, cependant ...)
  • La puce peut être d'une couleur différente du texte
  • Si l'utilisateur augmente la taille de son texte, la puce doit être mise à l'échelle proportionnellement (à condition que vous définissiez le remplissage et la marge en ems et non en px)

Désavantages:

  • Nécessite un élément non sémantique supplémentaire (cela vous fera probablement perdre plus d'amis sur SO que dans la vraie vie;) mais c'est ennuyeux pour ceux qui aiment que leur code soit aussi léger et efficace que possible, et cela viole la séparation de la présentation et du contenu que HTML / CSS est censé offrir)
  • Aucun contrôle sur la taille et la forme de la balle

Nous espérons de nouvelles fonctionnalités de style liste dans CSS4, afin que nous puissions créer des puces plus intelligentes sans recourir aux images ou au balisage exta :)


4
Très bonne réponse. Pour que le n ° 2 fonctionne, assurez-vous de conserver votre position de style de liste outside.
Tom Auger

L'élément span est la solution pour moi. J'ai attribué +1 à cette réponse uniquement parce que je préférais la marge négative au positionnement absolu négatif - sans raison valable.
FlipMcF

Si vous avez du texte qui enveloppe les lignes, j'ai trouvé que je devais ajouter display: block;à l'élément span pour que le texte enveloppé s'aligne également (j'ai également fini par utiliser des balises d'ancrage au lieu de travées)
Kevin M

Utiliser des images d'arrière-plan pour tout ce qui n'est pas seulement cela est presque toujours une très mauvaise idée. Ils ne peuvent pas être enregistrés, ne sont pas imprimés et ne sont pas mentionnés par les lecteurs d'écran. Utiliser <span> est la manière la plus élégante de résoudre ce problème. les rembourrages ne fonctionneront pas car ils changent également la position des balles.
Bachsau

3
Je n'utiliserais JAMAIS d'image d'arrière-plan pour cela. Vous pouvez toujours utiliser l'élément: before avec le contenu: "•"; ensuite, vous utilisez le remplissage et la position absolue sur cet élément avant pour le contrôler.
Yann Chabot

37

Cela devrait le faire. Assurez-vous de placer vos balles vers l'extérieur. vous pouvez également utiliser des pseudo éléments CSS si vous pouvez les déposer dans IE7 vers le bas. Je ne recommande pas vraiment d'utiliser des pseudo éléments pour ce genre de chose, mais cela fonctionne pour contrôler la distance.

ul {
  list-style: circle outside;
  width: 100px;
}

li {
  padding-left: 40px;
}

.pseudo,
.pseudo ul {
  list-style: none;
}

.pseudo li {
  position: relative;
}

/* use ISO 10646 for content http://la.remifa.so/unicode/named-entities.html */
.pseudo li:before {
  content: '\2192';
  position: absolute;
  left: 0;
}
<ul>
  <li>Any Browser really</li>
  <li>List item
    <ul>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </li>
</ul>

<ul class="pseudo">
  <li>IE8+ only</li>
  <li>List item
    <ul>
      <li>List item with two lines of text for the example.</li>
      <li>List item</li>
    </ul>
  </li>
</ul>


5
Je ne peux pas croire que cette réponse ne soit pas acceptée. C'est 100% CSS, ça n'ajoute aucun élément <span> superflu, et ça m'a finalement fait comprendre pourquoi il y a une option intérieur / extérieur! (et c'est la réponse acceptée de la question en double mentionnée ...)
MindTailor

1
L'utilisation list-style-position: outsideet le remplissage des LIéléments vous permettent d'augmenter la distance entre les puces, mais cela ne fonctionne toujours pas dans l'autre sens au-delà d'un décalage spécifié par le navigateur. Voir ce JS Bin .
Mesagoma

4
Addendum: dans les navigateurs modernes (IE9 +, FF, Chrome, etc.), utilisez un négatif text-indentsur <UL>ou <LI>pour annuler la distance imposée par le navigateur entre la puce et le <LI>contenu. Autrement dit, augmentez padding-leftcomme indiqué ci-dessus pour augmenter la distance et réduisez text-indentpour réduire la distance entre la puce et le contenu comme vous le souhaitez.
Mesagoma

1
Hélas , pour tous les navigateurs de bureau mentionnés ci-dessus, si le contenu d'un <LI>s'enroule dans une deuxième ligne, ces lignes suivantes finissent par être ré-indentées en fonction de la marge / du remplissage / du retrait que nous avons réussi à annuler pour la première ligne via text-indent. Sigh
Mesagoma

une autre option consiste à utiliser les pseudo éléments: before et à définir le contenu comme vous le souhaitez. à partir de là, positionnez les pseudo éléments comme vous le souhaitez.
Kevin

14

Ancienne question, mais le pseudo élément: before fonctionne bien ici.

<style>
    li:before {
        content: "";
        display: inline-block;
        height: 1rem;  // or px or em or whatever
        width: .5rem;  // or whatever space you want
    }
</style>

Cela fonctionne très bien et ne nécessite pas beaucoup de règles supplémentaires ou de HTML.

<ul>
    <li>Some content</li>
    <li>Some other content</li>
</ul>

À votre santé!


3
Réponse sympa et simple. J'ajouterais que ce paramètre margin-left: -5px(ou quelle que soit la valeur) réduira l'espace entre la puce et l' <li>élément
binaryfunt

2
Remarque: cela ne prend pas en charge les retraits suspendus
Eric

Réponse géniale, cela a parfaitement fonctionné avec le minimum de travail! Merci!
KyleFarris

12

Pour le type de style liste: en ligne :

C'est presque la même chose que la réponse de DSMann8 mais moins de code css.

Vous avez juste besoin de

<style>
    li:before {
        content: "";
        padding-left: 10px;
    }
</style>

<ul>
    <li>Some content</li>
</ul>

À votre santé


Cela fonctionne list-style-position: insideaussi, ce qui est génial!
Matt Dodge

11

Vous pouvez utiliser l' padding-leftattribut sur les éléments de la liste ( pas sur la liste elle-même!).


5
Veuillez noter que cela ne fonctionne que si le list-style-positionest défini sur la valeur par défaut outside.
août

Cela devrait être la réponse acceptée, au moins pour une utilisation normale. Cela évite d'utiliser un <span>élément uniquement à des fins de conception.
eukras

7

L'utilisation de text-indent sur li fonctionne mieux.

retrait de texte: -x px; rapproche la balle de li et vice-versa.

L'utilisation de relative on span la gauche négative peut ne pas fonctionner correctement avec les anciennes versions d'IE. PS - évitez de donner des positions autant que vous le pouvez.


Cela se comporte de manière étrange sur Chrome. S'accroche à peu d'espace à -5px;
Ian Warburton

7

Voici une autre solution utilisant un compteur css et des pseudo éléments. Je le trouve plus élégant car il ne nécessite pas l'utilisation de balisage html supplémentaire ni de classes css:

ol,
ul {
    list-style-position: inside;
}

li {
    list-style-type: none;
}

ol {
    counter-reset: ol; //reset the counter for every new ol
}

ul li:before {
        content: '\2022 \00a0 \00a0 \00a0'; //bullet unicode followed by 3 non breakable spaces
}

ol li:before {
        counter-increment: ol;
        content: counter(ol) '.\00a0 \00a0 \00a0'; //css counter followed by a dot and 3 non breakable spaces
}

J'utilise des espaces non cassables pour que l'espacement n'affecte que la première ligne de mes éléments de liste (si l'élément de liste fait plus d'une ligne). Vous pouvez utiliser le remplissage ici à la place.


7

Ancienne question mais toujours d'actualité. Je recommande d'utiliser le négatif text-indent. list-style-positiondoit être outside.

Avantages:

  • La balle est correctement positionnée automatiquement
  • Modifier la taille de la police ne casse pas la position de la puce
  • Pas d'éléments supplémentaires (pas de pseudo-éléments aussi)
  • Fonctionne à la fois pour RTL et LTR sans changement de CSS.

Les inconvénients:

  • essayer
  • à
  • trouver
  • une :)

2
J'ai essayé d'utiliser cette méthode mais le retrait ne fonctionne pas pour moi s'il y a des sauts de ligne. Le retrait du texte ne mettra en retrait que la première ligne.
Matt le

6

Une liste non ordonnée commence par la balise ul. Chaque élément de la liste commence par le Les éléments de la liste seront marqués par des puces (petits cercles noirs) par défaut:

    <!DOCTYPE html>
    <html>
       <body>
          <h2>Normal List </h2>
          <ul>
             <li>Coffee</li>
             <li>Tea</li>
             <li>Milk</li>
          </ul>
       </body>
    </html>

Production:

<!DOCTYPE html>
<html>
<body>

<h2>Normal List </h2>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>

La propriété text-indent spécifie l'indentation de la première ligne d'un bloc de texte.
Remarque: les valeurs négatives sont autorisées. La première ligne sera en retrait vers la gauche si la valeur est négative.

<ul style='text-indent: -7px;'>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Merci pour la réponse, veuillez essayer d'annoter vos solutions pour faciliter la compréhension des autres.
cdomination le

c'est la meilleure réponse et doit être acceptée. CSS minimum!
KawaiKx

5

Il semble que vous puissiez (un peu) contrôler l'espacement en utilisant un remplissage sur la balise <li>.

<style type="text/css">
    li { padding-left: 10px; }
</style>

Le hic, c'est qu'il ne semble pas vous permettre de le serrer comme votre dernier exemple.

Pour cela, vous pouvez essayer de désactiver le type de type liste et d'utiliser & bull;

<ul style="list-style-type: none;">
    <li>&bull;Some list text goes here.</li>
</ul>

5

Il semble y avoir une solution beaucoup plus propre si vous souhaitez uniquement réduire l'espacement entre la puce et le texte:

li:before {
    content: "";
    margin-left: -0.5rem;
}

4

Vous pouvez également utiliser un remplacement d'image d'arrière-plan comme alternative, vous donnant un contrôle total sur le positionnement vertical et horizontal.

Voir la réponse à cette question



0

Vous pouvez utiliser ul li:beforeet une image d'arrière-plan, et attribuer position: relativeet position:absoluteaux liet li:before, respectivement. De cette façon, vous pouvez créer une image et la positionner où vous le souhaitez par rapport au li.


0

Utiliser padding-left:1em; text-indent:-1empour le<li> tag.
Ensuite, list-style-position: insidepour le <ul>tag.

<ul style='list-style-position: inside;'>
  <li style='padding-left: 1em; text-indent: -1em;'>Item 1</li>
</ul>

0

La solution suivante fonctionne bien lorsque vous souhaitez rapprocher le texte de la puce et même si vous avez plusieurs lignes de texte.

margin-right vous permet de rapprocher le texte de la puce

text-indent garantit que plusieurs lignes de texte s'alignent toujours correctement

li:before {
  content: "";
  margin-right: -5px; /* Adjust this to move text closer to the bullet */
}

li {
  text-indent: 5px; /* Aligns second line of text */
}
<ul>
  <li> Item 1 ... </li>
  <li> Item 2 ... this item has tons and tons of text that causes a second line! Notice how even the second line is lined up with the first!</li>
  <li> Item 3 ... </li>
</ul>

entrez la description de l'image ici


En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.