Wie erstelle ich geordnete Listen ohne Punkt in HTML und CSS?

Erstellen geordneter Listen ohne Punkt in HTML und CSS

Trotz der allgemeinen Annahme, dass geordnete Listen in HTML einen Punkt nach der Zahl haben müssen, ist die Erstellung möglich eine ohne.

CSS-Lösung

Anstatt auf den unsemantischen Listenstil-Bild-Ansatz zurückzugreifen, können Sie den Punkt mit CSS eliminieren:

<code class="css">ol.custom {
  list-style-type: none;
  margin-left: 0;
}

ol.custom > li {
  counter-increment: customlistcounter;
}

ol.custom > li:before {
  content: counter(customlistcounter) " ";
  font-weight: bold;
  float: left;
  width: 3em;
}

ol.custom:first-child {
  counter-reset: customlistcounter;
}</code>

Hinweis

Diese Lösung verwendet den :before-Pseudoselektor, der in älteren Browsern wie IE6 und IE7 möglicherweise nicht unterstützt wird. Für diese Browser können Sie eine zusätzliche Regel hinzufügen, die nur auf sie abzielt, um den normalen Listenstil anzuzeigen:

<code class="css">ol.custom {
  *list-style-type: decimal; /* targets IE6 and IE7 only */
}</code>

Das obige ist der detaillierte Inhalt vonWie erstelle ich geordnete Listen ohne Punkt in HTML und CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!