<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 2015年7月.
{"* "}Some parts of this feature may have varying levels of support.
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 |
ブラウザーの互換性
Loading…