<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 关键字会使元素生成一个 ::marker 伪元素，其内容由元素的 list-style 属性指定（例如，一个项目符号），同时为其自身内容生成一个指定类型的主盒子。

语法

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">我将显示为列表项</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

参见

display