我们的志愿者还没有将这篇文章翻译为 中文 (简体)加入我们帮助完成翻译
您也可以阅读此文章的English (US)版。

The 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.

Syntax

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.

Note: 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.

Formal syntax

Syntax not found in DB!

Example

HTML

<div class="fake-list">I will display as a list item</div>

CSS

.fake-list {
  display: list-item;
  list-style-position: inside;
}

Result

Browser compatibility

Support of list-item

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
list-itemChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 6Opera Full support 7Safari Full support 1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
Supported on <legend>Chrome No support NoEdge No support NoFirefox Full support 64IE No support NoOpera No support NoSafari Full support YesWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android Full support 64Opera Android No support NoSafari iOS Full support YesSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support

See also

文档标签和贡献者

最后编辑者: mdnwebdocs-bot,