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 控制。

常见组合和影响：

立即学习“前端免费学习笔记（深入）”；

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

• 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。