纯CSS横向步骤条核心思路是：用flex布局统一分配空间，::before/::after伪元素绘制连接线，步骤项设position:relative精确定位，避免浮动或绝对定位；状态通过class切换联动圆圈、文字与连线样式；响应式下小屏转flex-direction:column竖排。
横向步骤条用 div 实现的核心思路
纯 CSS 实现横向步骤条，不依赖框架或 JS，关键在于用 display: flex 控制布局 + ::before/::after 伪元素画连接线 + 精确控制各步骤的宽度和对齐。不要用浮动或绝对定位——容易错位、响应式崩坏。
常见错误是把每个步骤写成独立 div 后硬塞 margin-left 拼接，结果连线长度不一致、文字换行后错位、缩放时断裂。正确做法是让容器统一分配空间，步骤项只负责内容和状态样式。
flex 布局下如何让步骤等宽且连线自动拉伸
容器设 display: flex，子项用 flex: 1 均分剩余空间；连线用伪元素从第二个步骤开始向左延伸，长度固定为 50%（相对父容器），再通过 transform: translateX(-50%) 居中对齐。
- 每个步骤
div外层必须有统一父容器，且该容器设position: relative - 步骤项本身设
position: relative，方便伪元素定位 - 连线伪元素放在步骤项内部，用
content: ""+position: absolute绘制 - 第一项不画左连线，最后一项不画右连线——用
:not(:first-child)和:not(:last-child)控制
.steps { display: flex; }
.step { flex: 1; position: relative; text-align: center; }
.step:not(:first-child)::before {
content: "";
position: absolute;
top: 20px;
left: 0;
width: 50%;
height: 4px;
background: #ddd;
transform: translateX(-50%);
}
如何用 CSS 控制步骤状态（未完成 / 进行中 / 已完成）
状态靠 class 切换，比如 step--active、step--done，避免用 JS 动态改内联样式。连线颜色、圆圈背景、文字颜色三者联动，否则视觉不一致。
立即学习“前端免费学习笔记（深入）”；
- 未完成步骤：圆圈边框色
#ddd，文字色#999，连线灰色 - 进行中步骤：圆圈背景
#007bff，文字加粗，连线变蓝 - 已完成步骤：圆圈内加图标（如
✓），连线全蓝，文字色#333 - 注意：伪元素连线的颜色必须随当前步骤状态变化，不能只靠前一项的状态判断
推荐直接给每个 step 加状态 class，然后用 .step--done::before 覆盖连线颜色，而不是用相邻兄弟选择器——后者在动态增删步骤时极易失效。
响应式断点下怎么避免步骤条挤成一团
小屏（max-width: 768px）直接切为竖排，不是简单缩小字体。横向步骤条在手机上强行压缩会导致文字重叠、圆圈挤压变形、连线歪斜，体验比竖排差得多。
- 用
@media (max-width: 768px)把容器改成flex-direction: column - 移除所有
::before连线，改用上下 margin 或 border-bottom 模拟流程感 - 步骤圆圈改用
margin-bottom: 16px隔开，文字居左对齐更易读 - 别试图用
font-size: clamp()强撑横排——用户需要的是可点击区域足够大，不是“看起来像桌面版”
真正容易被忽略的是：步骤文字长度差异大时（比如“填写信息” vs “实名认证完成”），即使用了 flex: 1，长文本也会撑开整个容器导致其他步骤被压缩。解决办法是给步骤内容加 word-break: keep-all 和 white-space: nowrap，必要时用 text-overflow: ellipsis 截断。
