彻底清除列表默认样式需同时设置 list-style: none、margin: 0 和 padding: 0；list-style-image 兼容性差，推荐用 ::before + background-image；Flex 布局下对齐需作用于 li 内部；语义结构不可破坏。
如何用 list-style 彻底清除默认列表符号
直接设 list-style: none 就能去掉圆点、数字等默认标记，但要注意它只影响列表项的「标记部分」，不重置 margin 和 padding —— 浏览器自带的缩进还在，视觉上仍像有缩进。
-
ul和ol都适用，写在父容器上即可 - 必须同时清空
margin和padding才算真正“干净”，比如：ul { list-style: none; margin: 0; padding: 0; } - 如果只清
list-style没清内边距，用 Chrome DevTools 查看元素时会发现padding-inline-start（或旧版padding-left）仍有 40px 左右
list-style-type 和 list-style-image 的实际取舍
想换图标但不用第三方字体或伪元素？list-style-image 看似方便，但存在明显兼容短板：不支持缩放、无法控制对齐、Safari 对 SVG 支持不稳定。多数情况下不如用 ::before + background-image 或 content。
-
list-style-type: disc / circle / square / decimal / lower-alpha仅适用于语义明确的列表场景，比如导航菜单不该用decimal -
list-style-image: url(arrow.svg)在 Firefox 中可能拉伸变形，且无法响应background-size - 更可控的替代写法：
li::before { content: ""; display: inline-block; width: 16px; height: 16px; background: url("check.svg") no-repeat center; background-size: contain; margin-right: 8px; }
Flex 布局下 li 的垂直对齐失效问题
当给 ul 加了 display: flex; flex-direction: column 后，li 的 align-items 不起作用——因为 li 默认是块级元素，flex 容器只管直接子元素的排列，而对齐行为需由子元素自身定义。
- 正确做法是把对齐逻辑放在
li内部内容上，例如：li { display: flex; align-items: center; } li span { margin-left: 8px; } - 若想让所有
li文字基线对齐，避免因字体升部/降部差异导致错位，加vertical-align: middle到li::before或图标元素上 - 不要对
ul设align-items期望它影响li的文字位置——那不是它的作用域
无障碍与语义不能为美化牺牲
用 list-style: none + display: flex 把列表做成横向导航很常见，但屏幕阅读器仍依赖 ul/ol 的语义识别这是个列表。只要结构没改，就别用 div 替换 ul。
立即学习“前端免费学习笔记（深入）”；
- 禁用默认样式没问题，但不要移除
role="list"或覆盖listitem角色 - 如果用伪元素画图标，确保图标不承载关键信息；重要状态（如“已完成”）得靠文本或
aria-label表达 - 检查焦点顺序：键盘 Tab 进入列表后，应自然落到每个
li或其可聚焦子元素（如a），而不是跳过整个区域
