Wie kann ich geordnete Listen in Firefox 3 mithilfe von CSS anpassen?

Anpassen geordneter Listen in Firefox 3

Linksbündige Listennummern:

Nach links - Richten Sie die Zahlen in einer geordneten Liste aus, verwenden Sie den folgenden Code:

li::before {
  display: inline-block;
  content: counter(item) ") ";
  counter-increment: item;
  width: 2em;
  margin-left: -2em;
}

Dieser Code erstellt ein Pseudoelement vor jedem Listenelement, das die Nummer gefolgt von einer schließenden Klammer anzeigt. Die Zahl wird innerhalb einer festen Breite von 2em linksbündig ausgerichtet und die Eigenschaft „margin-left“ stellt sicher, dass sie vom Listenelement eingerückt wird.

Ändern des Zahlenzeichens:

Um das Zeichen nach der Zahl in einer geordneten Liste zu ändern, ändern Sie den Wert der Content-Eigenschaft in der li::before-Deklaration. Um beispielsweise einen Punkt anstelle einer Klammer zu verwenden, verwenden Sie Folgendes:

content: counter(item) ".";

CSS-Lösung für alphabetische/römische Listen:

Um eine geordnete Liste zu konvertieren Um von Zahlen zu alphabetischen oder römischen Zeichen zu wechseln, ohne das Typattribut zu verwenden, verwenden Sie den Zähler-Reset, den Zähler-Inkrement und den Listenstil-Typ Eigenschaften:

ol {
  counter-reset: item;
}
li {
  counter-increment: item;
  list-style-type: none;
}
li::before {
  display: inline-block;
  content: counters(item, ".") " ";
}

Dieser Code setzt den Elementzähler zurück, sodass er bei 1 beginnt, erhöht ihn für jedes Listenelement und verbirgt die Standardnummern mithilfe von list-style-type: none. Die Content-Eigenschaft erstellt dann ein Pseudoelement, das das alphabetische oder römische Zeichen gefolgt von einem Punkt anzeigt.

Das obige ist der detaillierte Inhalt vonWie kann ich geordnete Listen in Firefox 3 mithilfe von CSS anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!