CSS 列表样式 - 即使使用适当的列表样式类型也不会显示标记项目符号

Question

我已将 ul 元素的样式明确设置为 list-style-type: disc。 ul 中的 li 元素自动继承此样式。换句话说，每个 li 元素之前应该有项目符号（disc 代表什么）。

ul {
  list-style-type: disc; /* Does not work */
}
li {
  display: block;
}

<ul>
  <li>Foo</li>
  <li>Bar</li>
  <li>Baz</li>
</ul>

Firefox Inspector devtool 正确识别列表中的所有 li 元素都具有属性 list-style-type.

的（继承）值 'disc'

但是，正如您还可以看到，如果您运行片段，光盘（即项目符号）实际上并未显示在浏览器表示中。相反，列表显示为好像 list-style-type 被定义为 none（即在 li 元素前面看不到项目符号或任何符号）。

我想知道这怎么可能：浏览器显示（无项目符号）似乎与检查器工具中正确显示的声明 list-style-type: disc 直接矛盾。

有人能解释 Inspector 工具（正确）所说的内容与实际浏览器表示之间的明显矛盾吗？

Answer 1

那是因为它有

display: block;

如果你想要一个标记，正确的显示应该是

display: list-item;

请注意，这应该是 li 元素的默认值。 Default style sheet for HTML 4 包含

li { display: list-item }

2.3. Generating Marker Boxes: the list-item keyword

The list-item keyword causes the element to generate a ::marker pseudo-element box [CSS-PSEUDO-4] with the content specified by its list-style properties (CSS 2.1§12.5 Lists) [CSS2] together with a principal box of the specified type for its own contents.

否则，list-style-* 属性不适用：

Applies to: elements with display: list-item

CSS 列表样式 - 即使使用适当的列表样式类型也不会显示标记项目符号

CSS List styling - marker bullet not shown even with appropriate list-style-type

css

inspection

html-lists

display