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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:58:07  来源:igfitidea点击:

Why does the list style disappear when display: block is added to a list item in a list (<ul> or <ol>)?

htmlcsshtml-lists

提问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.

更新的解决方案是使用:beforecontent

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>