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

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/

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>

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 :)

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>

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é!

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é

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

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.

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.

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 :)

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>

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>

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;
}

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

ul
{
list-style-position:inside;
} 

Définition et utilisation

La propriété list-style-position spécifie si les marqueurs d'élément de liste doivent apparaître à l'intérieur ou à l'extérieur du flux de contenu.

Source: http://www.w3schools.com/cssref/pr_list-style-position.asp

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.

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>

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>

utiliser <span style="display: flex;">à l'intérieur de chacun <li>.