Wie kann ich geordnete Listen in Firefox 3 (und höher) anpassen?

Anpassen geordneter Listen in Firefox 3

Linksbündige Listennummern

Um die Zahlen in einer geordneten Liste linksbündig auszurichten, können Sie CSS verwenden So überschreiben Sie den Standardstil:

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

Zeichen nach Liste ändern Zahlen

Um das Zeichen nach der Listennummer zu ändern, ändern Sie die Inhaltseigenschaft in der li::before-Regel:

li::before {
  ...
  content: counter(item) "a) ";
  ...
}

Konvertieren in alphabetische/römische Listen

An Konvertieren Sie Zahlen mithilfe von CSS in alphabetische oder römische Listen und verwenden Sie eine Kombination aus Zähler-Reset, counters()-Funktion und Inhalt Eigenschaft:

ol {
  list-style-type: none;
  counter-reset: my-counter;
}

li {
  display: block;
  counter-increment: my-counter;
}

li::before {
  content: counters(my-counter, lower-alpha) ". ";
  ...
}

Für römische Ziffern:

li::before {
  content: counters(my-counter, lower-roman) ". ";
  ...
}

Beachten Sie, dass diese Technik in älteren Browsern, einschließlich Internet Explorer 7, möglicherweise nicht funktioniert.

Das obige ist der detaillierte Inhalt vonWie kann ich geordnete Listen in Firefox 3 (und höher) anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!