CSS
Listenstile
Suche…
Syntax
- Listenstil: Listenstil-Typ | Listenstil-Position | list-style-image | initial | erben;
Parameter
| Wert | Beschreibung |
|---|---|
| Listenart-Typ | die Art der Listenelementmarkierung. |
| Listenstil-Position | gibt an, wo die Markierung platziert werden soll |
| Listen-Style-Image | Gibt den Typ der Listenelementmarkierung an |
| Initiale | Setzt diese Eigenschaft auf ihren Standardwert |
| erben | erbt diese Eigenschaft von ihrem übergeordneten Element |
Bemerkungen
Obwohl der list-style-type eigentlich eine Eigenschaft ist, die nur für Listenelemente gilt (normalerweise <li> ), wird sie häufig für das Listentag ( <ol> oder <ul> ) angegeben. In diesem Fall erben die Listenelemente die Eigenschaft.
Aufzählungsart oder Nummerierung
Speziell für <li> -Tags in einer ungeordneten Liste ( <ul> ):
list-style: disc; /* A filled circle (default) */
list-style: circle; /* A hollow circle */
list-style: square; /* A filled square */
list-style: '-'; /* any string */
Speziell für <li> -Tags innerhalb einer geordneten Liste ( <ol> ):
list-style: decimal; /* Decimal numbers beginning with 1 (default) */
list-style: decimal-leading-zero;/* Decimal numbers padded by initial zeros (01, 02, 03, … 10) */
list-style: lower-roman; /* Lowercase roman numerals (i., ii., iii., iv., ...) */
list-style: upper-roman; /* Uppercase roman numerals (I., II., III., IV., ...) */
list-style-type: lower-greek; /* Lowercase roman letters (α., β., γ., δ., ...) */
list-style-type: lower-alpha; /* Lowercase letters (a., b., c., d., ...) */
list-style-type: lower-latin; /* Lowercase letters (a., b., c., d., ...) */
list-style-type: upper-alpha; /* Uppercase letters (A., B., C., D., ...) */
list-style-type: upper-latin; /* Uppercase letters (A., B., C., D., ...) */
Nicht spezifisch:
list-style: none; /* No visible list marker */
list-style: inherit; /* Inherits from parent */
Bullet Position
Eine Liste besteht aus <li> Elementen innerhalb eines enthaltenden Elements ( <ul> oder <ol> ). Sowohl die Listenelemente als auch der Container können Ränder und Füllungen haben, die die genaue Position des Listenelementinhalts im Dokument beeinflussen. Die Standardwerte für den Rand und die Auffüllung können für jeden Browser unterschiedlich sein. Um dasselbe Layout browserübergreifend zu erhalten, müssen diese speziell festgelegt werden.
Jeder Listeneintrag erhält ein "Markierungsfeld", das den Aufzählungszeichen enthält. Dieses Feld kann entweder innerhalb oder außerhalb des Listenfelds platziert werden.
list-style-position: inside;
Platziert das Aufzählungszeichen innerhalb des <li> -Elements und drückt den Inhalt nach Bedarf nach rechts.
list-style-position: outside;
platziert das Aufzählungszeichen links vom <li> -Element. Wenn der Abstand des übergeordneten Elements nicht ausreicht, wird das Markierungsfeld nach links erweitert, auch wenn es von der Seite herunterfallen würde.
Anzeige des Ergebnisses der inside und outside : jsfiddle
Aufzählungszeichen / Zahlen entfernen
Manchmal sollte eine Liste keine Aufzählungspunkte oder Zahlen enthalten. Denken Sie in diesem Fall daran, den Rand und die Auffüllung anzugeben.
<ul>
<li>first item</li>
<li>second item</li>
</ul>
CSS
ul {
list-style-type: none;
}
li {
margin: 0;
padding: 0;
}