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

Geordnete Listen ohne Punkte erstellen

Viele Entwickler suchen nach Methoden, um geordnete Listen ohne den traditionellen Punkt oder das Zahlenzeichen nach jedem Element zu erstellen. Während HTML und CSS früher als unmöglich galten, bieten sie nun eine Lösung durch die richtige Implementierung von List-Style-Type- und Pseudo-Selektoren.

CSS-Lösung

Zu Um die Punkte zu entfernen, verwenden Sie den folgenden CSS-Code:

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

Indem Sie „list-style-type“ auf „none“ setzen, entfernen Sie das standardmäßige Aufzählungs- oder Zahlenzeichen. „counter-increment“ erstellt einen Zähler für jedes Listenelement, der im Pseudo-Selektor „:before“ angezeigt wird. Die Eigenschaft „content“ legt den Zählerwert als Inhalt des Listenelements fest. Sie können die Eigenschaft „width“ anpassen, um die Zahlenbreite zu steuern.

Fallback für ältere Browser

Fügen Sie für die Browser Internet Explorer 6 und 7 das folgende CSS zur Wiederherstellung hinzu der Standardlistenstil:

ol.custom {
  *list-style-type: decimal; /* targets IE6 and IE7 only */
}

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