html - 将导航栏从内联列表转换为移动版网站的 block 类型列表 - 缺少元素符号

Question

我正在尝试构建适合移动设备的网站版本，为此我需要将导航栏从 display:inline 样式列表转换为元素符号列表。对于最小(不完全)工作示例，这里是 html 和 css 文件:

ul li {
  display: inline;
}

@media only screen and (max-width: 600px) {
  ul li {
    display: block;
    list-style-type: circle; /* Not doing what I want. */
  }
  ul {
    list-style-type: circle; /* Not doing what I want either. */
  }
}

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

这按预期工作，但移动版本缺少列表元素前面的元素符号，尽管我尝试使用 list-style-type: circle 命令强制它们进入CSS。我知道我可以在每个列表元素前面手动添加一个小圆圈，但这感觉更像是一种劣质的解决方法，而不是正确的做法。

Answer 1

list-style-* 属性仅应用于 list-item。
当您设置 li {display: inline} 时，您禁用了 li 的默认外观。

使用 display:list-item 将其取回。

运行下面的代码片段并调整窗口大小:

li {
  display: inline;
}

@media only screen and (max-width: 600px) {
  li {
    display: list-item;
  }
}

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>