Wie spezifiziere ich reguläre Zeichen als Aufzählungszeichen in ungeordneten Listen?

Angeben eines regulären Zeichens für Aufzählungssymbole in ungeordneten Listen (

)

Während CSS die Verwendung benutzerdefinierter Grafiken als Aufzählungszeichen ermöglicht Um Symbole über das Attribut list-style-image zu verwenden, kann es wünschenswert sein, einfach ein reguläres Zeichen zu verwenden, z. B. „ Symbol.

Implementieren eines benutzerdefinierten Zeichenaufzählungszeichens

Um ein reguläres Zeichen als Aufzählungszeichensymbol zu implementieren, ohne auf eine Grafik zurückzugreifen, führen Sie die folgenden Schritte aus:

1. Standardstil entfernen:

• Setzen Sie die List-Style-Eigenschaft der Liste auf „None“ zurück, um den Standardstil zu entfernen.
• Setzen Sie margin-left und padding-left auf 0, um alle zu entfernen Einrücken.

2. Einrückung für Listenelemente festlegen:

• Fügen Sie padding-left zu den li-Elementen hinzu, um sie einzurücken.
• Wenden Sie text-indent auf die li-Elemente mit einem negativen Wert gleich an den Abstand links, um den Text innerhalb der Einrückung auszurichten.

3. Fügen Sie das benutzerdefinierte Zeichen hinzu:

• Erstellen Sie ein li:before-Pseudoelement, um das benutzerdefinierte Zeichen anzuzeigen.
• Setzen Sie die Inhaltseigenschaft auf das gewünschte Zeichen, z. B. „ “ .
• Fügen Sie padding-right hinzu, um das Zeichen vom Listenelement fernzuhalten Text.

Beispiel-CSS-Code:

ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

li {
  padding-left: 1em;
  text-indent: -1em;
}

li:before {
  content: "+";
  padding-right: 5px;
}

Durch Befolgen dieser Schritte können Sie die Standardaufzählungszeichen in Ihren ungeordneten Listen durch das Symbol „ “ ersetzen oder ein anderes reguläres Zeichen, ohne eine Grafik zu erstellen und darauf zu verweisen.

Das obige ist der detaillierte Inhalt vonWie spezifiziere ich reguläre Zeichen als Aufzählungszeichen in ungeordneten Listen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!