À gauche aligner à la fois de la liste des numéros et du texte

Je tiens à gauche aligner à la fois les nombres et le texte dans mon <ol>. C'est ce que je suis en train de réaliser:

Pour l'instant, chaque <li> contient un <a>, mais qui peut changer. Jusqu'à présent j'ai essayé de mettre de padding à gauche et puis un texte-tiret sur la <a>.

Voici mon code maintenant.

HTML:

<ol class="dinosaurs">
    <li><a>Dinosaur</a></li>
    <li><a>Tyrannosaurus</a></li>
    <li><a>Camptosaurus</a></li>
</ol>

CSS:

.dinosaurs{
    list-style-position: inside;
}

NOTE: je suis de l'affichage de la page web dans google Chrome 23 sur Windows 7.

N'est-ce pas déjà ce que vous faites? jsfiddle.net/j08691/LRV5x/1
Pas de. Regardez la différence entre l'endroit où le texte commence au #9 et #10.
Donc retrait de la liste de style de la position de la règle n'est pas ce que vous avez besoin? jsfiddle.net/j08691/LRV5x/2
Pas de. Ce droit aligne les nombres. Je veux à la fois les chiffres et le texte sera aligné à gauche. Voir l'image incluse dans la question.

OriginalL'auteur dmr | 2013-01-15

Vous pouvez positionner les éléments de la liste comme suit:

    .dinosaurs {
  list-style-position: inside;
}

.dinosaurs li{
  position: relative;
}
.dinosaurs li a {
  position: absolute;
  left: 30px;
}

qui donnerait http://jsfiddle.net/wBjud/2/

Ne fonctionne pas sur multi-entrées

OriginalL'auteur gotohales

15

Cela semble fonctionner:
```
.dinosaurs { counter-reset: item }
.dinosaurs li { display: block }
.dinosaurs li:before { 
  content: counter(item) ". ";
  counter-increment: item;
  width: 2em;
  display: inline-block;
}
```
Vraiment agréable de voir une solution souple ici. En voici un qui ne se casse pas comme les solutions à l'aide du positionnement absolu, si les éléments de l'enveloppe.
Je peux obtenir ce un pour travailler un peu mieux (ce que ford a montré ne fonctionne pas si bien pour les listes avec habillage du texte) par la définition de la LI de position:relative; et l' :avant position:absolute; et le positionnement de cette façon. jsFiddle exemple
Je viens de connecté à vous dire merci. Je pense que cela devrait être la réponse. Super!

OriginalL'auteur ford
1

Essayez d'ajouter padding-left: 0; à votre style, et de changer list-style-position: à outside si nécessaire.

list-style-position: outside droit aligne les nombres
Ah, La capture d'écran n'était pas encore en place. Gardez à l'esprit que list-style-position n'est pas en alignant les numéros de tellement comme dit la liste où à comparaître dans le cadre de sa boite. developer.mozilla.org/en-US/docs/CSS/list-style-position

OriginalL'auteur alanmoo
1

Vous pouvez faux en utilisant le positionnement, le remplissage et les marges.

jsFiddle exemple
```
.dinosaurs {
  list-style-position: inside;
  position:relative;
  margin-left: -20px;
}
a {
  position:absolute;
  left:70px;
}
```
Ne fonctionne pas sur multi-entrées

OriginalL'auteur j08691
0

Aucune des réponses a fonctionné pour moi, mais en combinant et en s'appuyant sur eux, j'ai trouvé une méthode similaire qui n', y compris pour les multi-entrées, sans avoir besoin de balises à l'intérieur des éléments de liste:
```
ol {
    counter-reset: item;
}
li {
    display: block;
    margin-left: 1.7em;
}
li:before {
    content: counter(item) ". ";
    counter-increment: item;
    position: absolute;
    margin-left: -1.7em;
}
```
Qui ressemble à ceci: https://jsfiddle.net/b3dayLzo/

Je pense qu'il fonctionne en mettant le li:before dans la marge de gauche de la li.

Vous souhaitez peut-être une autre margin-left.

Il n'y a pas de classe sur la ol parce que dans mon cas ce qui apparaît dans le style du conteneur.

OriginalL'auteur ShadSterling

Vous devez vous connecter pour publier un commentaire.