bonne indentation pour les listes ordonnées en html

Je ne peux pas obtenir une liste ordonnée de faire preuve d'une mise en retrait.
Les chiffres sont tous alignés à droite.
Ainsi, le navigateur (Chrome) indique un espace avant les simples chiffres et seulement aligne le double chiffres correctement vers la gauche.

Comment puis-je sortie une belle liste ordonnée où les nombres sont tous alignés à gauche et les éléments de la liste de toutes les start-dessous les uns des autres?

Vous avez besoin de montrer un peu de code ou une capture d'écran.

OriginalL'auteur reggie | 2010-09-21

15

En fait, la solution est assez simple, il suffit de définir
```
ol {list-style-position: inside;}
```
Et vos numéros devraient "aligner à gauche", comme vous voulez.

Qui aligne les nombres à gauche, oui. Mais le li contenu n'est pas aligné.
Bien tirer, maintenant vous êtes bein pointilleux. 😉 Ajoutez un peu de padding à gauche de votre li et voir si cela fonctionne. li{padding-left: 4em;}

OriginalL'auteur Jo Sprague
4

La fin de la partie, mais j'ai juste été confrontées à ce problème moi-même, et qui finit à l'aide de ce combo qui ajoute un zéro avant tout à un seul chiffre les éléments de la liste:
```
ol {
    margin:0px 0;
    padding:0;
    list-style: decimal-leading-zero inside none;
}

ol li 
{
    margin: 0px;
    padding: 0px;
    text-indent: -2.2em;
    margin-left: 3.4em;
}
```
semble hacky. ce n'est pas FireFox code généré?
l'ajout d'une unité après 0 ressemble à copier-collé à partir de Firebug, bien sûr 🙂 pour le hacky partie, à ma grande surprise, il semble fonctionner dans IE8+ selon MDN: list-style-type. Donc +1 pour Paul et bienvenue sur! 🙂
non, je veux dire "decimal-leading-zero", je n'ai jamais vu cela dans une feuille CSS.
c'est prise en charge dans IE8 et jusqu' et probablement aussi dans la plupart des autres navigateurs principaux. J'ai effectivement eu mon idée de dev.opera et comme ce doit être assez standard css si Opera prend en charge.

OriginalL'auteur Paul
1

Si vous n'avez pas l'esprit à l'aide de positionnement absolu, cela pourrait fonctionner pour vous.
```
<style type="text/css">
li {
    list-style-position: inside;
}
.li-content {
    position: absolute;
    left: 80px;
}
</style>

<ol>
  <li><span class="li-content">Test content</span></li>
    (...)
  <li><span class="li-content">Test content</span></li>
</ol>
```
Remarque: Si vous avez tout ce qui apparaît à gauche de la <ol> élément sur votre page (comme un div flottante), que le contenu de déplacer les chiffres à la droite, mais pas la acutal <li> contenu.

Vous pouvez également utiliser une autre technique, avec un balisage (imbriqués les éléments div) avec display:table et display:table-cell définir les propriétés. Ce qui permettrait d'éliminer le problème avec les éléments apparaissant sur la gauche, mais qui serait vous obliger à utiliser le CSS counter propriété.

Merci un tas. Qui a très bien fonctionné. J'ai juste eu à enlever le rembourrage à la gauche et maintenant il regarde la façon dont je veux qu'il regarde.
Uggh. Hmm... c'est d'accord sur une page de test. Je ne vais pas être en mesure d'utiliser le positionnement absolu, cependant.

OriginalL'auteur Christian Nesmark
0

Vous pouvez utiliser les CSS pour sélectionner une plage; dans ce cas, vous souhaitez que les éléments de la liste 1-9:
```
ol li:nth-child(n+1):nth-child(-n+9) 
```
Puis ajuster les marges sur ces premiers éléments de façon appropriée:
```
ol li:nth-child(n+1):nth-child(-n+9) { margin-left: .55em; }
ol li:nth-child(n+1):nth-child(-n+9) em,
ol li:nth-child(n+1):nth-child(-n+9) span { margin-left: 19px; }
```
Le voir en action ici: http://www.wortfm.org/wort-madison-charts-for-the-week-beginning-11192012/

Le problème avec cette approche est qu'il sélectionne les enfants, et non pas le n-ième élément de liste. Dire que ma liste commence à 3, alors le 10ème enfant serait l'élément 12. 10 et 11 ne serait pas indenter correctement.

OriginalL'auteur LaFaucon

Jo Sprague était pas trop loin, mais c'est en fait extérieur et non à l'intérieur comme indiqué ci-dessus.

Il devient immédiatement évident que si le contenu d'un li renvoyé à une nouvelle ligne.

<style type="text/css">
   ol { width: 250px; }
   li { list-style-position: outside; }
</style>

<ol>
   <li>
       This is an list item that is very 
       long so you may know if the content 
       will be aligned to it's sibling
   </li>
   <li>Just a short list item</li>
</ol>

Ici est un bon codepen https://codepen.io/pen/ pour les tests.

OriginalL'auteur Stefan Vilonel

Vous devez vous connecter pour publier un commentaire.