Wie kann ich geordnete Listen in HTML/CSS ohne Punkte erstellen?

Geordnete Listen in HTML/CSS ohne Punkte erstellen

Geordnete Listen werden üblicherweise mit Punkten nach den Listennummern angezeigt. Was aber, wenn Sie das Erscheinungsbild anpassen müssen, indem Sie diese Punkte entfernen? Hier ist eine Untersuchung der verfügbaren HTML- und CSS-Lösungen.

Wie vom Benutzer erwähnt, bietet CSS eine Möglichkeit, dies durch benutzerdefiniertes Styling zu erreichen. Die wichtigsten zu ändernden CSS-Eigenschaften sind:

• list-style-type: Um den Standardzeitraum zu entfernen und einen neuen Typ anzuwenden.
• counter-increment und counter-reset: Zum Erstellen ein benutzerdefinierter Zähler, der die Listennummern generiert.
• Inhalt: Zur Verwendung des generierten Zählers innerhalb von Pseudoelementen.

Der folgende CSS-Code demonstriert die gewünschte Funktionalität:

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

Durch die Kombination dieser CSS-Eigenschaften können Sie eine geordnete Liste erstellen, die die Zahlen ohne Punkte anzeigt. Zusätzlich wird der Zähler erhöht: customlistcounter; Mit der Eigenschaft können Sie bei Bedarf ein alternatives Trennzeichen angeben.

Es ist jedoch zu beachten, dass einige ältere Browser wie IE6 und IE7 den :before-Pseudoselektor nicht unterstützen. Um die Kompatibilität sicherzustellen, sollten Sie erwägen, eine zusätzliche CSS-Regel für diese Browser hinzuzufügen und das native Erscheinungsbild im Listenstil zu verwenden:

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

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