list-item
keyword causes the element to generate a
::marker
pseudo-element with the content specified by its
list-style
properties (for example a bullet point) together with a principal box of the specified type for its own contents.
A single value of
list-item
will cause the element to behave like a list item. This can be used together with
list-style-type
and
list-style-position
.
list-item
can also be combined with any
<display-outside>
keyword and the
flow
or
flow-root
<display-inside>
keywords.
注意
: In browsers that support the two-value syntax, if no inner value is specified it will default to
flow
. If no outer value is specified, the principal box will have an outer display type of
block
.
<div class="fake-list">I will display as a list item</div>
.fake-list {
display: list-item;
list-style-position: inside;
}
| 规范 | 状态 |
|---|---|
|
CSS Display Module Level 3
The definition of 'display-listitem' in that specification. |
候选推荐 |
list-item
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
list-item
|
Chrome 完整支持 1 | Edge 完整支持 12 | Firefox 完整支持 1 | IE 完整支持 6 | Opera 完整支持 7 | Safari 完整支持 1 | WebView Android 完整支持 ≤37 | Chrome Android 完整支持 18 | Firefox Android 完整支持 4 | Opera Android 完整支持 14 | Safari iOS 完整支持 1 | Samsung Internet Android 完整支持 1.0 |
Supported on
<legend>
|
Chrome 完整支持 71 | Edge 完整支持 79 | Firefox 完整支持 64 | IE 不支持 No | Opera 完整支持 58 | Safari 不支持 No | WebView Android 完整支持 71 | Chrome Android 完整支持 71 | Firefox Android 完整支持 64 | Opera Android 完整支持 50 | Safari iOS 不支持 No | Samsung Internet Android 完整支持 10.0 |
完整支持
不支持
<display-box>
<display-inside>
<display-internal>
<display-legacy>
<display-listitem>
<display-outside>
display