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

* Some parts of this feature may have varying levels of support.

O list-item palavra-chave faz com que o elemento gere um::marker pseudoelemento com o conteúdo especificado por sua list-style propriedades (por exemplo, um marcador) junto com uma caixa principal do tipo especificado para seu próprio conteúdo.

Sintaxe

Um valor único de list-item fará com que o elemento se comporte como um item da lista. Isso pode ser usado junto comlist-style-type e list-style-position.

list-item também pode ser combinado com qualquer <display-outside> palavra-chave e o flow ou flow-root <display-inside> palavras-chave.

Nota:: Nos navegadores que suportam a sintaxe de dois valores, se nenhum valor interno for especificado, o padrão será flow. Se nenhum valor externo for especificado, a caixa principal terá um tipo de exibição externo deblock.

Sintaxe formal

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

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

Exemplo

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

Resultado

Compatibilidade com navegadores

Suporte delist-item

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
list-item
Supported on <legend>

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

Veja também