0

我已经明确地将我的ul元素设置为具有list-style-type: disc. 中的li元素会ul自动继承此样式。换句话说,disc每个li元素之前都应该有项目符号(这就是它的意思)。

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列表中的所有元素都具有属性的(继承的)值 'disc' list-style-type

但是,如果您运行代码片段,您还可以看到,光盘(即项目符号)实际上并未显示在浏览器表示中。相反,列表显示为如同list-style-type定义为none(即在li元素前面没有看到项目符号或任何符号)。

我想知道这怎么可能:浏览器显示(没有项目符号)似乎list-style-type: disc与 Inspector 工具中正确显示的声明直接矛盾。

有人对 Inspector 工具(正确)所说的内容与实际浏览器表示之间的明显矛盾有解释吗?

4

1 回答 1

2

那是因为它有

display: block;

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

display: list-item;

请注意,这应该是li元素的默认值。HTML 4的默认样式表包含

li { display: list-item }

2.3. 生成标记框:list-item关键字

list-item关键字使元素生成一个 ::marker伪元素框[CSS-PSEUDO-4],其内容由其list-style属性(CSS 2.1§12.5 列表[CSS2]以及其自身内容的指定类型的主体框。

否则,list-style-*属性不适用:

适用于:元素display: list-item

于 2016-03-08T22:37:09.763 回答