Wie können Sie die Nummern in einer geordneten Liste anpassen?


108

Wie kann ich die Nummern in einer geordneten Liste linksbündig ausrichten?

1.  an item
// skip some items for brevity 
9.  another item
10. notice the 1 is under the 9, and the item contents also line up

Das Zeichen nach der Nummer in einer geordneten Liste ändern?

1) an item

Es gibt auch eine CSS-Lösung, mit der Sie von Zahlen zu alphabetischen / römischen Listen wechseln können, anstatt das type-Attribut für das ol-Element zu verwenden.

Ich interessiere mich hauptsächlich für Antworten, die auf Firefox 3 funktionieren.

Antworten:


98

Dies ist die Lösung, die ich in Firefox 3, Opera und Google Chrome habe. Die Liste wird weiterhin in IE7 angezeigt (jedoch ohne die Klammer und die linken Ausrichtungsnummern):

ol {
  counter-reset: item;
  margin-left: 0;
  padding-left: 0;
}
li {
  display: block;
  margin-bottom: .5em;
  margin-left: 2em;
}
li::before {
  display: inline-block;
  content: counter(item) ") ";
  counter-increment: item;
  width: 2em;
  margin-left: -2em;
}
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine<br>Items</li>
  <li>Ten<br>Items</li>
</ol>

BEARBEITEN: Mehrzeilige Korrektur durch Strager

Es gibt auch eine CSS-Lösung, mit der Sie von Zahlen zu alphabetischen / römischen Listen wechseln können, anstatt das type-Attribut für das ol-Element zu verwenden.

Siehe CSS-Eigenschaft vom Typ Listenstil . Bei Verwendung von Zählern akzeptiert das zweite Argument einen Wert vom Typ Listenstil. Zum Beispiel wird im Folgenden Upper Roman verwendet:

li::before {
  content: counter(item, upper-roman) ") ";
  counter-increment: item;
/* ... */

Um die Zahlen wieder hinzuzufügen, wurden sie durch einen globalen Stil entfernt (wer weiß, warum Sie ein ol verwenden und die Zahlen anstelle eines ul entfernen würden?). Sehr klare Antwort +1 für vollständige Erklärung und Code, kann leicht geändert werden, um alles zu tun.
Morvael

Ich schlage eine sauberere CSS- Rand- / Auffülllösung vor, die besser mit Listen mit breiter Nummerierung funktioniert : ol {counter-reset: item; padding-left: 0;} li {display: block; margin-bottom: .5em;} li:before {display: inline-block; content: counter(item) ") "; counter-increment: item; padding-right: 0.8em;}.
MMJ

28

Das CSS für Styling-Listen ist hier , aber im Grunde ist:

li {
    list-style-type: decimal;
    list-style-position: inside;
}

Allerdings Layout der spezifische sind Sie nach kann wohl nur durch Eintauchen in die Innereien des Layouts mit so etwas wie erreicht werden diese (beachten Sie, dass ich habe nicht wirklich versucht):

ol { counter-reset: item }
li { display: block }
li:before { content: counter(item) ") "; counter-increment: item }

1
Dadurch werden die Zahlen in einer Reihe, der Textinhalt jedoch nicht.
Grom

13

Sie können auch Ihre eigenen Nummern im HTML angeben - z. B. wenn die Nummern von einer Datenbank bereitgestellt werden:

ol {
  list-style: none;
}

ol>li:before {
  content: attr(seq) ". ";
}
<ol>
  <li seq="1">Item one</li>
  <li seq="20">Item twenty</li>
  <li seq="300">Item three hundred</li>
</ol>

Das seqAttribut wird mit einer ähnlichen Methode wie in anderen Antworten sichtbar gemacht. Aber anstatt zu verwenden content: counter(foo), verwenden wir content: attr(seq).

Demo in CodePen mit mehr Styling


7
Sie können dies vereinfachen, wenn Sie nur das valueAttribut für verwenden <li>. zB <li value="20">. Dann brauchen Sie keine Pseudoelemente. Demo
GWB

1
@ GWB Dies ist zwar gültig (und eine gute Lösung), aber auf numerische Werte beschränkt, da die Liste ordinal ist. Als solches können Sie so etwas nicht tun value="4A", da es nicht funktioniert. Darüber hinaus kann das Wertattribut mit dem typeAttribut arbeiten, der Wert muss jedoch weiterhin eine Zahl sein (da er innerhalb einer geordneten Menge funktioniert).
jedd.ahyoung

Danke - das hat bei mir funktioniert, als ich Flying Saucer brauchte , um eine Liste in umgekehrter Reihenfolge reversedanzuzeigen ( Attribut ist nur HTML5, ebenso wie das valuevon li). Anstatt deine zu benutzen, habe seqich eine gesetzt valueund attr(value)stattattr(seq)
jaygooby

8

Ich habe viel davon aus anderen Antworten gestohlen, aber das funktioniert in FF3 für mich. Es hat eine upper-romangleichmäßige Einrückung und eine enge Klammer.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<style type="text/css">
<!--
ol {
  counter-reset: item;
  margin-left: 0;
  padding-left: 0;
}
li {
  margin-bottom: .5em;
}
li:before {
  display: inline-block;
  content: counter(item, upper-roman) ")";
  counter-increment: item;
  width: 3em;
}
-->
</style>
</head>

<body>
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine</li>
  <li>Ten</li>
</ol>
</body>
</html>

5

Ich schlage vor, mit dem Attribut: before zu spielen und zu sehen, was Sie damit erreichen können. Dies bedeutet, dass Ihr Code wirklich auf nette neue Browser beschränkt ist und den (ärgerlich großen) Teil des Marktes ausschließt, in dem immer noch alte Browser verwendet werden.

So etwas wie das Folgende, das eine Fixierung auf die Gegenstände erzwingt. Ja, ich weiß, dass es weniger elegant ist, die Breite selbst wählen zu müssen, aber die Verwendung von CSS für Ihr Layout ist wie verdeckte Polizeiarbeit: So gut Ihre Motive auch sein mögen, es wird immer chaotisch.

li:before {
  content: counter(item) ") ";
  counter-increment: item;
  display: marker;
  width: 2em;
}

Aber Sie müssen experimentieren, um die genaue Lösung zu finden.


Sie benötigen einen Counter-Reset: item; vor diesem Block.
Greg

5

Die Zahlen in einer Reihe aufstellen besser , wenn Sie führende Nullen-den Zahlen hinzufügen, indem Sie list-style-type zu:

ol { list-style-type: decimal-leading-zero; }

5

HTML5: Verwenden Sie das valueAttribut (kein CSS erforderlich)

Moderne Browser interpretieren das valueAttribut und zeigen es wie erwartet an. Siehe MDN-Dokumentation .

<ol>
  <li value="3">This is item three.</li>
  <li value="50">This is item fifty.</li>
  <li value="100">This is item one hundred.</li>
</ol>

Schauen Sie sich auch den <ol>Artikel über MDN an , insbesondere die Dokumentation für das startAttribut und.


4

Geliehen und verbessert Marcus Downings Antwort . Getestet und funktioniert in Firefox 3 und Opera 9. Unterstützt auch mehrere Zeilen.

ol {
    counter-reset: item;
    margin-left: 0;
    padding-left: 0;
}

li {
    display: block;
    margin-left: 3.5em;          /* Change with margin-left on li:before.  Must be -li:before::margin-left + li:before::padding-right.  (Causes indention for other lines.) */
}

li:before {
    content: counter(item) ")";  /* Change 'item' to 'item, upper-roman' or 'item, lower-roman' for upper- and lower-case roman, respectively. */
    counter-increment: item;
    display: inline-block;
    text-align: right;
    width: 3em;                  /* Must be the maximum width of your list's numbers, including the ')', for compatability (in case you use a fixed-width font, for example).  Will have to beef up if using roman. */
    padding-right: 0.5em;
    margin-left: -3.5em;         /* See li comments. */
}

Außerdem möchten Sie die Textausrichtung: links; nicht richtig. Und die letzte Zeile sollte am linken Rand stehen: -3,5 em;
Grom

@grom, Danke für die Korrektur. Außerdem rendert Opera Listen standardmäßig rechtsbündig, sodass ich dieses Verhalten nachgeahmt habe.
Strager

@grom, Das Firefox-Problem ist ... Firefox setzt das li: before-Pseudoelement ohne float in eine eigene Zeile, auch wenn es angezeigt wird: inline-block.
Strager

@strager, Nun, ich verwende 3.0.4 unter Linux und 3.0.3 unter Windows und es funktioniert für mich ohne den float: left; Regel.
Grom

@grom, Hmm, interessant. Ich habe mich gerade selbst getestet und es funktioniert ohne den Schwimmer. Vielleicht habe ich falsch geschrieben.
Strager

2

Es gibt das Type-Attribut , mit dem Sie den Nummerierungsstil ändern können. Sie können jedoch den Punkt nach der Zahl / dem Buchstaben nicht ändern.

<ol type="a">
    <li>Turn left on Maple Street</li>
    <li>Turn right on Clover Court</li>
</ol>

Das Markup in dieser Antwort muss behoben werden. Verwenden Sie Kleinbuchstaben und schließen Sie Attributwerte in "Anführungszeichen" ein.
Dylanfm

Und schließen Sie Ihre Elemente: <li> ... </ li>.
Dylanfm

@dylanfm - Sie wissen, dass das dargestellte Markup korrekt ist, 100% gültiges HTML, ja? Stimmen Sie keine Personen ab, die XHTML nicht verwenden, es sei denn, XHTML wird angefordert.
Ben Blank

Ich habe dich nicht abgelehnt. Und ja, das stimmt wieder. HTML. Ich war nur eine wählerische Person.
Dylanfm

Ich entschuldige mich für die Veröffentlichung von ungültigem HTML. Ich habe den Code von einer Website kopiert und nicht daran gedacht, ihn zu korrigieren. Ich schäme mich jetzt :(
GateKiller

1

Die Dokumente sagen in Bezug auf list-style-position: outside

CSS1 hat die genaue Position des Markierungsfelds nicht angegeben, und aus Gründen der Kompatibilität bleibt CSS2 gleichermaßen mehrdeutig. Verwenden Sie zur genaueren Steuerung der Markierungsfelder Markierungen.

Weiter oben auf dieser Seite geht es um Marker.

Ein Beispiel ist:

       LI:before { 
           display: marker;
           content: "(" counter(counter) ")";
           counter-increment: counter;
           width: 6em;
           text-align: center;
       }

Alle Beispiele (siehe w3.org/TR/CSS2/generate.html#q11 ) für Marker funktionieren bei mir nicht.
Grom

1

Nein ... benutze einfach einen DL:

dl { overflow:hidden; }
dt {
 float:left;
 clear: left;
 width:4em; /* adjust the width; make sure the total of both is 100% */
 text-align: right
}
dd {
 float:left;
 width:50%; /* adjust the width; make sure the total of both is 100% */
 margin: 0 0.5em;
}

0

Ich habe es. Versuche Folgendes:

<html>
<head>
<style type='text/css'>

    ol { counter-reset: item; }

    li { display: block; }

    li:before { content: counter(item) ")"; counter-increment: item; 
        display: inline-block; width: 50px; }

</style>
</head>
<body>
<ol>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
</ol>
</body>

Der Haken ist, dass dies auf älteren oder weniger kompatiblen Browsern definitiv nicht funktioniert: display: inline-blockist eine sehr neue Eigenschaft.


0

Schnelle und schmutzige alternative Lösung. Sie können ein Tabellierungszeichen zusammen mit vorformatiertem Text verwenden. Hier ist eine Möglichkeit:

<style type="text/css">
ol {
    list-style-position: inside;
}
li:first-letter {
    white-space: pre;
}
</style>

und dein HTML:

<ol>
<li>    an item</li>
<li>    another item</li>
...
</ol>

Beachten Sie, dass der Abstand zwischen dem li Tag und dem Anfang des Textes ein Tabellierungszeichen ist (was Sie erhalten, wenn Sie die Tabulatortaste im Editor drücken).

Wenn Sie ältere Browser unterstützen müssen, können Sie dies folgendermaßen tun:

<style type="text/css">
ol {
    list-style-position: inside;
}
</style>

<ol>
    <li><pre>   </pre>an item</li>
    <li><pre>   </pre>another item</li>
    ...
</ol>

0

Die anderen Antworten sind konzeptionell besser. Sie können die Zahlen jedoch einfach mit der entsprechenden Nummer '& ensp;' um sie in eine Reihe zu bringen.

* Hinweis: Ich habe zunächst nicht erkannt, dass eine nummerierte Liste verwendet wird. Ich dachte, die Liste würde explizit generiert.


0

Ich werde hier die Art von Antwort geben, die ich normalerweise nicht gerne lese, aber ich denke, da es andere Antworten gibt, die Ihnen sagen, wie Sie erreichen können, was Sie wollen, könnte es schön sein, zu überdenken, ob das, was Sie erreichen möchten, wirklich ist eine gute Idee.

Zunächst sollten Sie sich überlegen, ob es eine gute Idee ist, die Elemente auf eine nicht standardmäßige Weise mit einem anderen als dem bereitgestellten Trennzeichen anzuzeigen.

Ich kenne die Gründe dafür nicht, aber nehmen wir an, Sie haben gute Gründe.

Die hier vorgeschlagenen Methoden zum Erreichen, die darin bestehen, Ihrem Markup Inhalte hinzuzufügen, hauptsächlich über das CSS: vor der Pseudoklasse. Dieser Inhalt verändert Ihre DOM-Struktur wirklich und fügt diese Elemente hinzu.

Wenn Sie die Standardnummerierung "ol" verwenden, erhalten Sie einen gerenderten Inhalt, in dem der Text "li" auswählbar ist, die vorangestellte Nummer jedoch nicht auswählbar ist. Das heißt, das Standard-Nummerierungssystem scheint mehr "Dekoration" als realer Inhalt zu sein. Wenn Sie Inhalte für Zahlen hinzufügen, indem Sie beispielsweise diese ": before" -Methoden verwenden, kann dieser Inhalt ausgewählt und entsprechend ausgeführt werden, wodurch unerwünschte Probleme beim Kopieren / Einfügen oder Zugänglichkeitsprobleme mit Bildschirmleseprogrammen auftreten, die diesen "neuen" Inhalt zusätzlich lesen zum Standard-Nummerierungssystem.

Möglicherweise könnte ein anderer Ansatz darin bestehen, die Zahlen mit Bildern zu formatieren, obwohl diese Alternative ihre eigenen Probleme mit sich bringt (Zahlen werden nicht angezeigt, wenn Bilder deaktiviert sind, Textgröße für Zahlen ändert sich nicht, ...).

Der Grund für diese Antwort ist jedenfalls nicht nur, diese "Bilder" -Alternative vorzuschlagen, sondern die Leute dazu zu bringen, über die Konsequenzen nachzudenken, die sich aus dem Versuch ergeben, das Standard-Nummerierungssystem für geordnete Listen zu ändern.


0

Dieser Code macht den Nummerierungsstil mit den Headern von li-Inhalten identisch.

<style>
    h4 {font-size: 18px}
    ol.list-h4 {counter-reset: item; padding-left:27px}
    ol.list-h4 > li {display: block}
    ol.list-h4 > li::before {display: block; position:absolute;  left:16px;  top:auto; content: counter(item)"."; counter-increment: item; font-size: 18px}
    ol.list-h4 > li > h4 {padding-top:3px}
</style>

<ol class="list-h4">
    <li>
        <h4>...</h4>
        <p>...</p> 
    </li>
    <li>...</li>
</ol>
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.