CSS-Listeneigenschaften: list-style-type und list-style-position

CSS-Listeneigenschaften: Listenstiltyp und Listenstilposition, spezifische Codebeispiele sind erforderlich

In der Front-End-Entwicklung müssen wir häufig Listen zum Anzeigen von Informationen verwenden. CSS bietet einige Eigenschaften zum Verschönern und Anpassen des Listenstils. Die beiden am häufigsten verwendeten Eigenschaften sind list-style-type und list-style-position.

1. list-style-type-Attribut
   list-style-type-Attribut wird verwendet, um den Typ des Markup-Symbols für Listenelemente zu definieren. Standardmäßig generiert der Browser automatisch Markierungssymbole basierend auf der Reihenfolge der Liste, normalerweise einen durchgezogenen Punkt (eine Scheibe). Wir können den Stil des Markup-Symbols jedoch über das Attribut list-style-type ändern.

Im Folgenden sind einige häufig verwendete Listenstil-Typwerte und ihre Auswirkungen aufgeführt:

• Disc: Vollpunkte
• Kreis: Hohlpunkte
• Quadrat: Vollquadrate
• Keine: Kein Markierungssymbol
• dezimal: Dezimalziffern (1, 2, 3, ...)
• dezimalführende Null: Dezimalziffern mit führenden Nullen (01, 02, 03, ...)
• lower-roman: römische Kleinbuchstaben ( i, ii, iii, ...)
• upper-roman: römische Großbuchstaben (I, II, III, ...)
• lower-alpha: Kleinbuchstaben (a, b, c, ...)
• upper-alpha: Großbuchstaben (A, B, C, ...)

Wenn wir beispielsweise das Markierungssymbol einer Liste in ein ausgefülltes Quadrat ändern möchten, können wir den folgenden Code verwenden:

ul {
  list-style-type: square;
}

2. list-style-position-Attribut
   list-style-position-Attribut wird verwendet, um die Position des Listenelement-Markierungssymbols zu definieren. Standardmäßig wird das Markierungssymbol links vom Listenelement platziert. Wir können die Eigenschaft list-style-position verwenden, um das Markierungssymbol außerhalb oder innerhalb des Listenelements zu platzieren.

Im Folgenden sind die beiden Werte von list-style-position und ihre Auswirkungen aufgeführt:

• inside: Das Markierungssymbol befindet sich innerhalb des Listenelements.
• outside: Das Markierungssymbol befindet sich außerhalb des Listenelements

Wenn wir beispielsweise die Liste platzieren möchten Das Markierungssymbol des Elements wird außen platziert, Sie können den folgenden Code verwenden:

ul {
  list-style-position: outside;
}

3. Umfassendes Beispiel
   Das Folgende ist ein Beispiel, das Listenstil-Typ und kombiniert list-style-position, zeigt eine geordnete Liste mit einem benutzerdefinierten Stil:

ol {
  list-style-type: decimal;
  list-style-position: inside;
  padding-left: 20px;
}

ol li {
  padding-left: 10px;
  line-height: 1.5;
}

In diesem Beispiel ist das Listenmarkierungssymbol eine Dezimalzahl, die innerhalb des Listenelements platziert wird, und ein bestimmter linker Rand und eine bestimmte Zeilenhöhe werden hinzugefügt Listenelement.

Zusammenfassung
Durch die Verwendung der Eigenschaften „list-style-type“ und „list-style-position“ können wir den Stil der Liste anpassen, um sie besser an unsere Designanforderungen anzupassen. Die obigen Beispiele sind nur einige der gebräuchlichen Verwendungen. Tatsächlich stehen für diese beiden Eigenschaften einige andere Werte zur Auswahl. Durch die flexible Verwendung dieser Attribute können wir vielfältigere Listeneffekte erzeugen.

Das obige ist der detaillierte Inhalt vonCSS-Listeneigenschaften: list-style-type und list-style-position. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!