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

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

構文

list-item 単独の値を指定すると、要素はリスト項目のように動作します。これは list-style-type や list-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

ブラウザーの互換性

BCD tables only load in the browser

関連情報