Question

我已明确地将ul元素设为list-style-type: disc。 li中的ul元素会自动继承此样式。换句话说，在每个disc元素之前应该有子弹（这是li代表的）。

＆＃13;

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

＆＃13;

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

＆＃13;

Firefox Inspector devtool正确识别列表中的所有li元素都具有（继承）值＆＃39; disc＆＃39;属性list-style-type。

但是，您也可以看到是否运行了片段，光盘（即子弹）实际上并未显示在浏览器表示中。相反，列表显示为list-style-type被定义为none（即li元素前面没有看到子弹或任何符号）。

我想知道这是怎么回事：似乎浏览器显示（没有子弹）与Inspector工具中正确显示的声明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

list-item关键字导致元素生成   ::marker伪元素框[CSS-PSEUDO-4]   由list-style属性（CSS 2.1§12.5 Lists）[CSS2]指定的内容以及其中的主要框   指定类型的内容。

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

适用于：display: list-item
的元素

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

1 个答案: