Wie entferne ich den Punkt nach geordneten Listennummern in HTML und CSS?

Geordnete Listen in HTML und CSS: Entfernen des Punkts

Das Erstellen einer geordneten Liste ohne den Punkt nach den Zahlen ist mit CSS möglich. Auch wenn Sie vielleicht davon ausgehen, dass dies nicht machbar ist, wollen wir untersuchen, wie Sie dies erreichen können.

Um den Punkt zu entfernen, gestalten Sie die Liste wie folgt:

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

Um benutzerdefinierte Zahlen zu erstellen, verwenden Sie Folgendes Code:

<code class="css">ol.custom > li {
  counter-increment: customlistcounter;
}

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

Dadurch werden vor jedem Listenelement benutzerdefinierte Nummern angezeigt.

Beachten Sie, dass diese Lösung auf dem basiert :before Pseudo-Selektor, der in älteren Browsern wie IE6 und IE7 möglicherweise nicht funktioniert. Um dieses Problem zu beheben, verwenden Sie eine zusätzliche CSS-Regel, die speziell auf diese Browser abzielt:

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

Das obige ist der detaillierte Inhalt vonWie entferne ich den Punkt nach geordneten Listennummern in HTML und CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!