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

list-item キーワードは、要素に list-style プロパティで指定された内容 (例えば見出し記号) を含む ::marker 擬似要素と共に、自身の内容物のために指定された種類の基本的なボックスを生成します。

構文

list-item 単独の値を指定すると、要素はリスト項目のように動作します。これは list-style-typelist-style-position と共に使用することができます。

list-item<display-outside> キーワードのいずれかと、 <display-inside>flow または flow-root キーワードと組み合わせることもできます。

メモ: 二つの値の構文に対応しているブラウザーでは、内部表示種別がないと既定で flow になります。外部表示種別が指定されないと、基本ボックスは外部表示種別が block になります。

形式文法

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

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

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

結果

仕様書

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

ブラウザーの互換性

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

関連情報