为什么在列表（<ul> 或 <ol>）的列表项中添加 display: block 时列表样式消失？

Question

这似乎也适用于 display: inline; 和 display: inline-block; 。

这就是我的意思：

 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>

对于列表样式，我指的是实际的“项目符号”或“数字”（使用 <ol> 时）

原文由 Fredrik 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是因为通常情况下， display 被设置为 list-item 对于 <li> 元素。请参阅 W3C CSS3 规范： http ://www.w3.org/TR/css3-lists/#declaring-a-list-item。

要声明列表项，“显示”属性应设置为“列表项”。

请注意，您可以为任意 HTML 元素提供相同的行为；例如，在 display: list-item <div>

原文由 Martijn Pieters 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

更新的解决方案是使用 :before 和 content 。

有关工作示例，请参阅此 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>

原文由 alex 发布，翻译遵循 CC BY-SA 3.0 许可协议