<display-listitem>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das Schlüsselwort list-item bewirkt, dass das Element ein ::marker Pseudo-Element mit dem durch seine list-style Eigenschaften angegebenen Inhalt erzeugt (zum Beispiel ein Aufzählungspunkt), zusammen mit einem Hauptfeld des angegebenen Typs für die eigenen Inhalte.

Syntax

Ein einzelner Wert von list-item führt dazu, dass das Element sich wie ein Listenelement verhält. Dies kann zusammen mit list-style-type und list-style-position verwendet werden.

list-item kann auch mit jedem <display-outside>-Schlüsselwort und den flow oder flow-root <display-inside>-Schlüsselwörtern kombiniert werden.

Hinweis: In Browsern, die die Zwei-Wert-Syntax unterstützen, wird, falls kein innerer Wert angegeben ist, standardmäßig flow verwendet. Wenn kein äußerer Wert angegeben ist, erhält das Hauptfeld einen äußeren Anzeigetyp von block.

Formale Syntax

<display-listitem> = 
  <display-outside>?     &&
  [ flow | flow-root ]?  &&
  list-item              

<display-outside> = 
  block   |
  inline  |
  run-in

Beispiele

HTML

html

<div class="fake-list">I will display as a list item</div>

CSS

css

.fake-list {
  display: list-item;
  list-style-position: inside;
}

Ergebnis

Spezifikationen

Specification
CSS Display Module Level 3 # typedef-display-listitem

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

display