HTML里怎么让或
显示项目符号
默认就会显示，但很多人改了CSS又发现符号没了——问题通常出在 list-style 被设成了 none，或者父容器用了 display: flex / display: grid 导致列表项丢失默认渲染逻辑。
实操建议：
- 检查是否无意中写了
ul, ol { list-style: none; }（常见于重置样式表或 CSS 框架） -
list-style是简写属性，等价于list-style-type+list-style-position+list-style-image，只改其中一项不会覆盖其他 - 如果用 Flex 布局包裹
li，记得给li显式加list-style-type: disc;（因为 Flex 会让li失去“列表项”语义渲染）
用 CSS 自定义项目符号形状和位置
浏览器默认的圆点、数字、字母不够用时，得靠 list-style-type 和 list-style-position 控制。
常见组合和影响：
-
list-style-type: square;→ 实心方块；circle→ 空心圆；lower-roman→ i, ii, iii -
list-style-position: inside;让符号进文本流，适合短文本；outside（默认）符号在行框外，换行时文本对齐更稳 - 中文排版慎用
inside，容易导致首行缩进错乱或与文字重叠 - 不支持自定义字符（如 ✅）直接用
list-style-type，得换::marker
用 ::marker 画带图标/颜色的项目符号
::marker 是现代方案，能单独控制符号的字体、颜色、甚至内容，但兼容性要注意。
关键点：
- 必须作用于
li::marker，不能写在ul或ol上 - 支持
content（如content: "→";），但仅限单个字符或简单字符串；复杂图标建议用伪元素 +background -
color和font-size对::marker有效，但margin/padding不生效（需用list-style-position配合） - IE 完全不支持，Edge 18- 不支持
content，上线前务必查 caniuse
无序列表符号不显示？先看这三件事
不是代码写错了，而是环境或继承关系干扰了渲染。
排查顺序：
- 打开开发者工具，选中
li元素，看list-style-type计算值是不是none（可能来自* { list-style: none; }） - 检查
li的display是否被改成flex/inline/table-cell—— 这些会切断列表项默认行为 - 确认没对
ul或ol设置counter-reset或counter-increment却忘了配content: counter(...)，否则可能“符号消失”其实是计数器没触发
复杂点在于：符号是否显示，既取决于 CSS 层叠，也取决于 display 类型和继承链。有时候删掉一行无关的 display: contents 就恢复了——别只盯着 list-style。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
