HTML中如何添加项目符号_HTML添加项目符号列表样式【列表标记】

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。