die richtige Formatierung für nummerierte Listen in html

Ich Schaffe es nicht, eine geordnete Liste, um die richtige Einrücken.
Die zahlen sind alle auf der rechten Seite ausgerichtet.
Also der browser (Chrome) zeigt ein Leerzeichen vor den einstelligen zahlen und nur richtet die zweistelligen zahlen korrekt auf der linken Seite.

Wie kann ich die Ausgabe einer schön geordneten Liste, wo die Nummern sind alle Links ausgerichtet, und die Elemente der Liste beginnen alle untereinander?

Sie brauchen, um einige code oder einen Screenshot.

InformationsquelleAutor reggie | 2010-09-21

15

Tatsächlich, die Lösung ist ziemlich einfach, legen Sie
```
ol {list-style-position: inside;}
```
Und Ihre zahlen sollten "ausrichten Links" wie Sie wollen.
- Das richtet die zahlen auf der linken Seite, ja. Aber die li-Inhalte ist nicht ausgerichtet.
- Gut Schießen, jetzt bist du bein wählerisch. 😉 Fügen Sie einige padding auf der linken Seite, um Ihre li und sehen, ob das funktioniert. li{padding-left: 4em;}
InformationsquelleAutor Jo Sprague
4

Spät zur party, aber ich habe gerade das Ringen mit diesem problem selber und landete mit dieser combo fügt eine null vor jede einzelne Ziffer Listenelemente:
```
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;
}
```
- scheint hacky. ist das ein FireFox-code generiert?
- hinzufügen von einer Einheit nach der 0 sieht aus wie copy-eingefügt von Firebug, sicher 🙂 Wie für die hacky Teil, zu meiner überraschung scheint es zu funktionieren im IE8+ nach MDN: list-style-type. Also +1 für Paul und herzlich willkommen auf SO! 🙂
- Nein, ich meine "decimal-leading-zero" habe ich noch nie gesehen, diese in irgendeiner CSS.
- es ist unterstützt, IE8 und oben und wohl auch in den meisten anderen wichtigen Browsern. Ich habe tatsächlich meine Ahnung von dev.opera und dachte, es muss schon ein ziemlich standard-css, wenn Opera unterstützt.
InformationsquelleAutor Paul
1

Wenn es Ihnen nichts ausmacht mit absoluter Positionierung, könnte dies für Sie arbeiten.
```
<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>
```
Hinweis: Wenn Sie schon alles haben, erscheinen auf der linken Seite der <ol> element auf Ihrer Seite (wie eine floating div) ist, wird der Inhalt bewegen Sie die zahlen auf der rechten Seite, aber nicht die eigentliche <li> Inhalt.

Konnte man auch mit einer ganz anderen Technik, mit einer anderen markup (verschachtelte div-Elemente) mit display:table und display:table-cell properties gesetzt werden. Das würde beseitigen Sie das Problem mit den Elemente, die auf der linken, sondern würde verlangen, dass Sie nutzen Sie die CSS - counter Eigenschaft.
- Dank einem Haufen. Das hat Super funktioniert. Ich hatte gerade zu entfernen die Polsterung auf der linken Seite und jetzt sieht es aus wie ich will, es zu suchen.
- Igitt. Hmm... es sieht gut auf einem test-Seite. Ich werde nicht in der Lage sein zu verwenden, absolute Positionierung, obwohl.
InformationsquelleAutor Christian Nesmark
0

Können Sie CSS verwenden, um einen Bereich auszuwählen; in diesem Fall soll die Liste der items 1-9:
```
ol li:nth-child(n+1):nth-child(-n+9) 
```
Dann passen die Ränder auf die ersten Elemente entsprechend:
```
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; }
```
Ihn in Aktion zu sehen hier: http://www.wortfm.org/wort-madison-charts-for-the-week-beginning-11192012/
- Problem bei diesem Ansatz ist, dass es wählt die Kinder, und nicht die N-te Listenelement. Sagen, dass meine Liste beginnt bei 3, dann die 10 Kind-Element 12. 10 und 11 würde nicht Gedankenstrich korrekt.
InformationsquelleAutor LaFaucon

Jo Sprague war nicht allzu weit Weg, aber eigentlich ist es außen und nicht innen, wie oben angegeben.

Es wird sofort klar, wenn man den Inhalt einer li wraps in eine neue Zeile.

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

Hier ist eine gute codepen https://codepen.io/pen/ für die Prüfung.

InformationsquelleAutor Stefan Vilonel

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.