CSS: espace de contrôle entre la balle et

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

(1) Utiliser une image de fond:

<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 que vous voulez pour la balle
• vous pouvez utiliser CSS background-position pour positionner l'image à peu près n'importe où vous voulez par rapport au texte, en utilisant les pixels, ems ou %

inconvénients:

• ajoute un fichier image supplémentaire (bien que petit) à votre page, augmentant le poids de la page
• si un utilisateur augmente la taille du texte sur son navigateur, la puce restera à la taille d'origine. Il est également probable qu'il va devenir plus loin hors de la position que la taille du texte augmente
• si vous développez un disposition "responsive" en utilisant seulement des pourcentages pour les largeurs, il pourrait être difficile d'obtenir la puce exactement où vous le voulez sur une gamme de largeurs d'écran

2. Utilisez du rembourrage sur le <li> étiquette

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

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

avantages:

• pas d'image = 1 fichier à télécharger
• en ajustant le rembourrage sur le <li> , vous pouvez ajouter autant extra l'espace horizontal entre la puce et le texte comme vous le souhaitez
• si l'utilisateur augmente la taille du texte, l'espacement et la taille des puces devraient être proportionnels."

inconvénients:

• ne Peut pas déplacer la balle plus près du texte que le navigateur par défaut
• limité aux formes et aux tailles des types de balles encastrées CSS
• Balle doit être de la même couleur que le texte
• Aucun contrôle sur le positionnement vertical de la balle

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

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

• pas d'image = 1 fichier à télécharger
• , Vous obtenez plus de contrôle sur la position de la balle qu'avec l'option (2) – vous pouvez rapprochez-le du texte (bien que malgré tous mes efforts il semble que vous ne pouvez pas modifier la position verticale en ajoutant padding-top au <span> . Quelqu'un d'autre peut avoir une solution pour ce...)
• la puce peut être d'une couleur différente du texte
• si l'utilisateur augmente la taille de son texte, la puce devrait être mise à l'échelle en proportion (à condition que vous positionniez le rembourrage et la marge dans ems pas px)

Inconvénients:

• nécessite un élément supplémentaire peu élégant (cela vous fera probablement perdre plus d'amis sur SO qu'il ne le fera dans la vie réelle;) mais c'est ennuyeux pour ceux qui aiment que leur code soit aussi mince et efficace que possible, et il 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

voici espérer pour quelques nouvelles fonctionnalités list-style dans CSS4, de sorte que nous pouvons créer des balles plus intelligentes sans recourir à des images ou un mark-up exta:)

ça devrait le faire. Assurez-vous de définir vos balles à 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 l'utilisation de pseudo-éléments pour ce genre de chose, mais il ne 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: '92';
  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>

question ancienne, mais l'élément pseudo :avant 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>

il fonctionne vraiment bien et ne nécessite pas beaucoup de règles supplémentaires ou html.

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

santé!

For list-style-type: inline :

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>

Cheers

vous pouvez utiliser l'attribut padding-left sur la liste items ( pas sur la liste elle-même!).

utilisant le texte-tiret sur li fonctionne le mieux.

text-indent: -x px; de déplacer la balle plus près de li et vice-versa.

en utilisant relatif sur portée la gauche négative pourrait ne pas fonctionner correctement avec les versions plus anciennes pour IE. P. S-évitez de donner des positions autant que vous le pouvez.

Une liste non ordonnée commence par la balise ul. Chaque élément de la liste commence par 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>

sortie:

<!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 dans un bloc de texte.

Remarque: les valeurs Négatives sont autorisées. La première ligne sera en retrait à gauche si la valeur est négative.

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

Voici une autre solution en utilisant CSS counter et pseudo elements. Je le trouve plus élégant car il ne nécessite pas l'utilisation de markup html supplémentaire ni 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: '22 "151900920"a0 "151900920"a0 "151900920"a0'; //bullet unicode followed by 3 non breakable spaces
}

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

j'utilise des espaces non cassables de sorte que l'espacement n'affecte que la première ligne des éléments de ma liste (si l'élément de liste est long de plus d'une ligne). Vous pourriez utiliser du rembourrage ici à la place.

vous pouvez également utiliser un remplacement d'image de fond comme une alternative, vous donnant le contrôle total sur le positionnement vertical et horizontal.

voir la réponse à cette Question

ul
{
list-style-position:inside;
} 

définition et Usage

la propriété list-style-position spécifie si les marqueurs list-item 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

il semble que vous pouvez (quelque peu) contrôler l'espacement en utilisant le rembourrage sur la balise

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

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

question ancienne mais toujours pertinente. Je recommande l'utilisation de négatif text-indent . list-style-position doit être outside .

Pour:

• Puce est correctement placé automatiquement
• Changer la taille de police à ne pas rompre la balle en position
• Pas d'éléments supplémentaires ( non ::pseudo-éléments trop )
• fonctionne pour les deux RTL and LTR without change in CSS.

Inconvénients:

• essayer
• à
• trouver
• :)

vous pouvez utiliser ul li:before et une image de fond, et attribuer position: relative et position:absolute au li et li:before , respectivement. De cette façon, vous pouvez créer une image et la positionner où vous voulez par rapport au li.

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