Links so anordnen Liste von zahlen und text

Ich würde gerne Links ausgerichtet, sowohl die zahlen und den text in meiner <ol>. Dies ist, was ich versuche zu erreichen:

Links so anordnen Liste von zahlen und text

Für jetzt, jedes <li> enthält eine <a>, aber das kann sich ändern. Bisher habe ich versucht, indem padding auf der linken Seite und dann eine text-indent auf die <a>.

Hier ist mein code jetzt.

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

HINWEIS: ich bin Leser der Webseite in Chrome 23 auf Windows 7.

  • Ist das nicht schon das, was du tust? jsfiddle.net/j08691/LRV5x/1
  • Nein. Sehen Sie den Unterschied zwischen dem, wo der text beginnt in #9 und #10.
  • So entfernen des list-style-position-Regel ist nicht, was Sie müssen, oder? jsfiddle.net/j08691/LRV5x/2
  • Nein. Dieses Recht richtet den zahlen. Ich möchte sowohl die Anzahl und der text Links ausgerichtet werden. Siehe das Bild enthalten, in Frage.
InformationsquelleAutor dmr | 2013-01-15
  1. 10

    Konnte man die position in der Liste Elemente, wie etwa so:

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

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

    was ergeben würde http://jsfiddle.net/wBjud/2/

    • Funktioniert nicht in mehrzeiligen Einträgen
    InformationsquelleAutor gotohales
  2. 15

    Diese scheint zu funktionieren:

    .dinosaurs { counter-reset: item }
.dinosaurs li { display: block }
.dinosaurs li:before { 
  content: counter(item) ". ";
  counter-increment: item;
  width: 2em;
  display: inline-block;
}
    • Wirklich schön zu sehen, eine flexible Lösung hier. Dieser wird nicht brechen Sie die Lösungen anhand der absoluten Positionierung, wenn die Elemente wickeln.
    • Ich kann diese Arbeit ein wenig besser (was ford hat nicht so gut funktioniert, für Listen mit Umbruch text) durch die Einstellung des LI position:relative; und das :vor position:absolute; und positionieren Sie es so. jsFiddle-Beispiel
    • Ich mich nur angemeldet um danke zu sagen. Ich denke, das sollte die Antwort sein. Super!!!
    InformationsquelleAutor ford
  3. 1

    Versuchen Sie padding-left: 0; zu Ihrem Stil, und ändern list-style-position: zu outside wenn nötig.

    • list-style-position: outside Recht richtet den zahlen
    • Ah, Der screenshot war nicht bis noch. Beachten Sie, dass list-style-position ist nicht die Ausrichtung der zahlen so viel, wie er sagt, die Liste, wo angezeigt, in Bezug auf den Begrenzungsrahmen. developer.mozilla.org/en-US/docs/CSS/list-style-position
    InformationsquelleAutor alanmoo
  4. 1

    Sie können gefälschte es mit Positionierung, Polsterung und Margen.

    jsFiddle-Beispiel

    .dinosaurs {
  list-style-position: inside;
  position:relative;
  margin-left: -20px;
}
a {
  position:absolute;
  left:70px;
}
    • Funktioniert nicht in mehrzeiligen Einträge
    InformationsquelleAutor j08691
  5. 1

    Keine der bestehenden Antworten, die für mich gearbeitet, aber durch die Kombination und Gebäude auf Ihnen fand ich eine ähnliche Methode, die funktioniert, auch für mehrzeilige Einträge, ohne dass alle tags in der Liste Elemente:

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

    Die wie folgt aussieht: https://jsfiddle.net/b3dayLzo/

    Ich denke, es funktioniert, indem die li:before am linken Rand des li.

    Möchten Sie vielleicht eine andere margin-left.

    Gibt es keine Klasse, die auf die ol da in meinem Fall dies scheint im Stil des Containers.

    InformationsquelleAutor ShadSterling
Schreibe einen Kommentar