web-dev-qa-db-fra.com

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

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

C'est-à-dire, au lieu d'avoir toujours

*  Some list text goes
   here.

Je voudrais 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 l'ensemble du bloc vers la gauche ou la droite, par exemple, http://www.alistapart.com/articles/taminglists/

htmlcsshtml-lists
159
erjiang

Placez son contenu dans un span qui est relativement positionné, vous pouvez alors contrôler l'espace par la propriété left de la 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>
141
BalusC

Pour résumer les autres réponses ici - si vous souhaitez contrôler plus précisément l’espace entre les puces et le texte d’un élément de la liste <li>, vous avez les options suivantes:

(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 presque n'importe où par rapport au texte, à l'aide de pixels, ems ou%

Désavantages:

  • Ajoute un fichier image supplémentaire (bien que petit) à votre page, augmentant ainsi 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 que la position du texte augmente à mesure que la taille du texte augmente.
  • Si vous développez une présentation "réactive" utilisant uniquement des pourcentages pour les largeurs, il peut être difficile de placer la puce exactement où vous le souhaitez sur une plage de largeurs d'écran.

2. Utilisez le remplissage sur la balise <li>]

<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.
  • Si l'utilisateur augmente la taille du texte, l'espacement et la taille des puces doivent être proportionnels

Désavantages:

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

(3) Entoure 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:

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

Désavantages:

  • Requiert un élément extra-sémantique supplémentaire (cela vous fera probablement perdre plus d'amis sur SO que dans la vie réelle;) mais il est agaçant 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 supposé offrir)
  • Aucun contrôle sur la taille et la forme de la balle

Nous espérons de nouvelles fonctionnalités de type liste dans CSS4, afin que nous puissions créer des puces plus intelligentes sans recourir à des images ou à une balise exta :)

112
Joel

Cela devrait le faire. Assurez-vous de placer 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 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>
31
Kevin

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

À votre santé!

12
David Mann

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

À votre santé

10
larshaeuser

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

8
ClosureCowboy

L'utilisation de l'indentation du texte sur li fonctionne le mieux.

retrait du texte: -x px; déplacera la balle plus près de li et vice-versa.

Si vous utilisez relative on span, le négatif à gauche risque de ne pas fonctionner correctement avec les anciennes versions pour IE. P.S- évitez de donner des positions autant que vous le pouvez.

7
Ayush Maheshwari

Une liste non ordonnée commence par la balise ul. Chaque élément de la liste commence par. Les éléments de la liste sont 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 d'un bloc de texte.
Remarque: les valeurs négatives sont autorisées. La première ligne sera mise en retrait à gauche si la valeur est négative.

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

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 insécables pour que l'espacement n'affecte que la première ligne de mes éléments de liste (si l'élément de liste a plus d'une ligne). Vous pouvez utiliser un rembourrage ici à la place.

6
Lucas Demea

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

Avantages:

  • La balle est correctement positionnée automatiquement
  • Changer la taille de la police ne casse pas la position de la balle
  • Aucun élément supplémentaire (aucun :: pseudo-éléments aussi)
  • Fonctionne à la fois pour RTL et LTR sans modification de CSS.

Les inconvénients:

  • essayer
  • à
  • trouver
  • un :)
5
Ilya Novojilov
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

4
rex

Vous pouvez également utiliser un remplacement d’image d’arrière-plan, ce qui vous donne un contrôle total sur le positionnement vertical et horizontal.

Voir la réponse à cette question

4
Tom Auger

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

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

Le problème, c'est que cela ne semble pas vous permettre de le serrer comme un dernier exemple.

Pour cela, vous pouvez essayer de désactiver le type liste-style et d’utiliser bull;

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

Il semble y avoir une solution beaucoup plus propre si vous voulez seulement réduire l’espacement entre la puce et le texte:

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

Vous pouvez utiliser ul li:before et une image d'arrière-plan, et affecter position: relative et position:absolute à 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.

0
Astockwell