li圆点与文字不对齐是list-style-position:outside的默认行为，并非样式错误；用inside可缓解但引发新问题；最可靠方案是用::before伪元素重绘圆点并垂直居中。
为什么li的圆点和文字看起来没对齐
不是样式写错了，是list-style-position: outside（默认值）的天然行为：圆点画在padding-left区域外侧，文本从padding-left起始；换行时第二行直接顶到容器左边缘，首行圆点却悬在外面——视觉上就“偏下”或“不对齐”。这不是 bug，是规范定义的行为。
用list-style-position: inside能解决吗
能缓解，但会带来新问题：inside让圆点挤进内容区，参与盒模型计算，导致width变窄、换行错位、响应式断点偏移。尤其当li设了max-width或flex-basis时，圆点可能把文字挤出可视区。
- 仅适用于单行短文本，且父容器有足够内边距
- 别和
display: flex混用——inside会让flex-basis失效 - 屏幕阅读器仍按
outside逻辑播报，语义一致性受损
真正可控的对齐方案：伪元素重绘圆点
放弃原生list-style，用::before手动画点，完全掌控位置、大小、颜色和垂直居中逻辑：
ul.custom {
list-style: none;
padding-left: 0;
}
ul.custom li {
position: relative;
padding-left: 24px; /* 为伪元素留空间 */
line-height: 1.5; /* 配合 vertical-align */
}
ul.custom li::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
background-color: #333;
border-radius: 50%;
}
关键点：top: 50% + transform: translateY(-50%)确保圆点严格垂直居中；line-height需与li实际行高匹配，否则多行文本时上下偏移。
横向排列时圆点对齐更难？先关掉原生标记
display: flex下原生圆点极易错位、被裁切或脱离容器。别挣扎调list-style-position，直接清空：
- 统一加
ul { list-style: none; padding-left: 0; } - 横向布局用
ul { display: flex; align-items: center; gap: 1em; } - 每个
li内部再用::before画点，位置锚定在li左边界，不受flex主轴影响
最易被忽略的是：多行文本+横向列表时，align-items: center只对齐第一行，后续换行内容仍可能“吊着”。此时必须用伪元素方案，且top要基于line-height而非固定像素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
