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.

html css html-lists roman-numerals grom
quelle

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>
Erweitern Sie das Snippet

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;
/* ... */
grom
quelle
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 }
Marcus Downing
quelle
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>
Erweitern Sie das Snippet

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

z0r
quelle
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>
Steve Perks
quelle
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.

Marcus Downing
quelle
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; }
Peter Hilton
quelle
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>
Erweitern Sie das Snippet

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

Flimm
quelle
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. */
}
Strager
quelle
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>
GateKiller
quelle
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;
       }
Stephen Denne
quelle
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;
}
William Entriken
quelle
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.

Marcus Downing
quelle
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>
Marco Luglio
quelle
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.

Metro
quelle
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.

tomasofen
quelle
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>
Vlad Alivanov
quelle