此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

<display-listitem>

基线 广泛可用 *

自 2015年7月 起,此特性已在主流浏览器中得到支持,可在大多数设备和浏览器版本中正常使用。

* 此特性的某些部分的支持程度可能有所不同。

list-item 关键字会使元素生成一个 ::marker 伪元素,其内容由元素的 list-style 属性指定(例如,一个项目符号),同时为其自身内容生成一个指定类型的主盒子。

语法

list-item 的单独值将导致元素的行为类似于列表元素。其可以与 list-style-typelist-style-position 一起使用。

list-item 也可以与任意的 <display-outside> 关键字和 <display-inside> 中的 flowflow-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;
}

结果

规范

规范
CSS Display Module Level 3
# typedef-display-listitem

浏览器兼容性

参见