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, display
is set to list-item
for <li>
elements. See the W3C CSS3 specification: http://www.w3.org/TR/css3-lists/#declaring-a-list-item.
那是因为通常情况下,display
设置为list-item
for<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-item
on a <div>
for example.
请注意,您可以为任意 HTML 元素赋予相同的行为;设置display: list-item
在一个<div>
例如。
回答by alex
An updated solution is to make use of :before
and 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 ol
with upper-alpha
so that's not possible.
Martin 的回答是正确的,但没有提供解决方案,而 Pappy 的回答仅在您想要项目符号或轻松访问li
's 标识符的情况下才相关。就我而言,我需要有一个ol
withupper-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: top
on the immediate child of the li
:
对我们来说,解决这个问题的最短方法是在 的直接子节点上放置一个内联 ( inline
, inline-block
, inline-flex
) 属性:vertical-align: top
li
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 ol
using 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>