Html 为什么在列表（<ul> 或 <ol>）中的列表项添加 display: block 时列表样式消失？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6257041/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why does the list style disappear when display: block is added to a list item in a list (<ul> or <ol>)?
提问by Fredrik
This seems to valid for display: inline;and display: inline-block;too.
这似乎也适用于display: inline;和display: inline-block;。
This is what I mean:
这就是我的意思：
ul li {
display: block;
/* Or display: inline; */
/* Or display: inline-block; */
}
<ul>
<li>list item1</li>
<li>list item3</li>
<li>list item3</li>
</ul>
And with list style I mean the actual "bullets" or "numbers" (when <ol>is used)
对于列表样式，我指的是实际的“项目符号”或“数字”（何时<ol>使用）
回答by Martijn Pieters
That's because normally, displayis set to list-itemfor <li>elements. See the W3C CSS3 specification: http://www.w3.org/TR/css3-lists/#declaring-a-list-item.
那是因为通常情况下，display设置为list-itemfor<li>元素。请参阅 W3C CSS3 规范：http: //www.w3.org/TR/css3-lists/#declaring-a-list-item。
To declare a list item, the ‘display' property should be set to ‘list-item'.
要声明一个列表项，'display' 属性应该设置为 'list-item'。
Note that you can give arbitrary HTML elements the same behaviour; set display: list-itemon a <div>for example.
请注意，您可以为任意 HTML 元素赋予相同的行为；设置display: list-item在一个<div>例如。
回答by alex
An updated solution is to make use of :beforeand content.
更新的解决方案是使用:before和content。
See this JSfiddle for a working example. http://jsfiddle.net/t72h3/
有关工作示例，请参阅此 JSfiddle。http://jsfiddle.net/t72h3/
ul li {
display: inline-block;
}
ul li:before {
content: "? ";
}
<ul>
<li>list item1</li>
<li>list item3</li>
<li>list item3</li>
</ul>
回答by dwilt
Martin's answer is true but doesn't provide a solution and Pappy's is only relevant if you want bullets or easily have access to the what the li's identifier will be. In my case, I need to have an olwith upper-alphaso that's not possible.
Martin 的回答是正确的，但没有提供解决方案，而 Pappy 的回答仅在您想要项目符号或轻松访问li's 标识符的情况下才相关。就我而言，我需要有一个olwithupper-alpha所以这是不可能的。
The shortest way around this for us was to put a an inline (inline, inline-block, inline-flex) property as well as vertical-align: topon the immediate child of the li:
对我们来说，解决这个问题的最短方法是在 的直接子节点上放置一个内联 ( inline, inline-block, inline-flex) 属性：vertical-align: topli
ol {
list-style: upper-alpha;
> li {
display: block;
}
}
.list-item-content {
display: inline-block; // any inline property will work
vertical-align: top;
}<ol>
<li>
<div class="list-item-content">Some text</div>
</li>
</ol>回答by Omer S
A way to get the effect would be:
获得效果的一种方法是：
<ol>
<li>
<a href="mylink">desc</a>
</li>
</ol>
CSS:
CSS：
li {
list-style-position: inside;
display: inline-block; /* or block */
}
li a {
display: list-item;
padding: 10px 20px;
}
回答by Asher Garland
Solution for ul
解决方案 ul
ul {
list-style: none;
display: block;
padding: 0;
}
ul li::before {
content: "? ";
}
<ul>
<li>list item1</li>
<li>list item3</li>
<li>list item3</li>
</ul>
Solution for olusing counter-increment
ol使用反增量的解决方案
ol {
list-style: none;
display: block;
padding: 0;
counter-reset: my-counter;
}
ol li {
counter-increment: my-counter;
}
ol li::before {
content: counter(my-counter) ". ";
}
<ol>
<li>list item1</li>
<li>list item3</li>
<li>list item3</li>
</ol>
