<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 关键字会使元素生成一个 ::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 |
浏览器兼容性
Loading…