通配符选择器 * { padding: 0; } 会清除 的默认左内边距，而浏览器正是依靠这段内边距为项目符号（bullets）预留显示空间；移除后，符号虽仍存在，但被裁剪或挤出可视区域，造成“ bullets 不显示”的假象。
通配符选择器 `* { padding: 0; }` 会清除 `
- ` 的默认左内边距，而浏览器正是依靠这段内边距为项目符号（bullets）预留显示空间；移除后，符号虽仍存在，但被裁剪或挤出可视区域，造成“ bullets 不显示”的假象。
- 内容区内部，而是位于
- 的 padding-left 所定义的左侧空白区域内
。
在现代 CSS 开发中，使用通配符重置（* { padding: 0; margin: 0; }）虽能快速统一初始样式，但也极易引发隐蔽的布局问题——其中最典型之一，就是无序列表（
- ）的项目符号（bullets）神秘消失。这不是浏览器 Bug，而是 CSS 渲染机制的必然结果：项目符号并不渲染在
当你通过 * { padding: 0; } 全局清空所有元素的内边距时，
- 原本由浏览器用户代理样式表（user agent stylesheet）赋予的 padding-left: 40px（具体值因浏览器略有差异）也被强制设为 0。此时，尽管 list-style-type: disc 依然生效、::marker 伪元素仍在生成，但因缺乏左侧留白，项目符号实际被“压”在容器左边缘之外，或与文字重叠后视觉上不可见。
✅ 正确修复方式：针对性恢复 和
的内边距
无需放弃全局重置，只需在重置后显式覆盖关键元素的 padding-left：
/* 全局重置（可保留）*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 关键修复：为列表恢复合理的左侧内边距 */
ul,
ol {
padding-left: 2rem; /* 推荐值：2rem ≈ 32px，兼容多数字体与缩放 */
}
/* 可选：确保子列表缩进层级清晰 */
ul ul,
ol ol,
ul ol,
ol ul {
padding-left: 1.5rem;
}
? 为什么是 padding-left 而非 margin-left？
margin-left 作用于整个块框外部，不影响内部 marker 定位；而 padding-left 扩展的是
的内容区域，为 ::marker 提供了必需的绘制画布空间。这是 CSS 列表规范明确规定的渲染逻辑。
? 验证与调试技巧
若不确定是否为该问题，可通过浏览器开发者工具快速验证：
- 选中
- 元素 → 查看 Computed 面板 → 搜索 padding-left；
- 若显示为 0px（且无其他样式覆盖），即为根本原因；
- 临时在 Styles 面板中手动输入 padding-left: 40px;，立即可见 bullets 回归。
⚠️ 注意事项与最佳实践
-
避免在
- 上设置 list-style: none 或 display: block 等意外覆盖
：检查是否有类似 #offer-list li { list-style: none; } 的局部规则干扰； - 慎用 list-style-position: inside：它将 marker 移入内容流，虽可绕过 padding 依赖，但易导致文本换行错位，仅作临时方案；
- 语义化优先：若仅为图标/自定义符号，建议改用 ::before 伪元素 + Font Awesome 图标，完全脱离原生 marker 限制；
- 响应式适配：在小屏幕媒体查询中，可微调 padding-left（如 1.5rem），兼顾触控可点击区域与视觉平衡。
✅ 最终推荐代码片段（适配你的项目）
在你现有 CSS 底部添加以下规则即可立即修复 #offer-list 及所有列表：
/* 恢复列表默认缩进，解决 bullets 消失问题 */
ul,
ol {
padding-left: 2rem;
}
/* 针对 about 页面中的列表，增强可读性 */
#what-we-offer ul {
margin-top: 0.75rem;
line-height: 1.6;
}
#what-we-offer li h3 {
font-weight: 600;
margin: 0;
}
至此，你的“About Us”板块中
- 的圆点符号将清晰、稳定地呈现——既保持了全局样式的可控性，又尊重了 HTML 列表的原生渲染逻辑。记住：CSS 重置不是终点，而是精细化样式控制的起点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
