步骤条不能仅用<ul><li>实现，因其需CSS控制横向布局、伪元素绘连线、状态类区分步骤，须用flex布局+::before画线+响应式断点调整。

步骤条为什么不能直接用 <ul> 套 <li> 就完事

单纯写 <ul><li>第一步</li><li>第二步</li></ul> 只会渲染成默认圆点列表，没有连线、序号、状态区分。步骤条本质是「带视觉状态的水平导航」，需要 CSS 控制布局、伪元素画线、状态类控制样式（比如 active、done、pending）。

用 <ul> + display: flex 实现等宽横向布局

这是最可控的方式，避免浮动或 inline-block 的间隙问题：

• 给 <ul> 加 display: flex 和 justify-content: space-between
• 每个 <li> 设为 flex: 1，再用 text-align: center 居中文本
• 第一项和最后一项不需要左侧/右侧连线，所以连线由 <li> 内部的伪元素 ::before 绘制（从第二项开始）

<ul class="step-bar">
  <li class="step active">登录</li>
  <li class="step done">验证</li>
  <li class="step">完成</li>
</ul>

用 ::before 画连接线并控制状态颜色

连线不是额外 DOM 元素，而是用伪元素在每项左侧画竖线（实际是细长矩形），再通过类名控制颜色和是否显示：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 给 .step:not(:first-child)::before 添加 content: ""、position: absolute、width: 2px、height: 24px、background: #ccc
• .step.done::before 和 .step.active::before 覆盖背景色为 #007bff
• 序号用 <span class="step-number"> 包裹，避免伪元素干扰语义

响应式断点要重排布局，别硬撑横排

小屏下强行横向步骤条会溢出或文字换行错乱：

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

• 在 @media (max-width: 768px) 中把 .step-bar 改为 flex-direction: column
• 移除 ::before 连线，改用 margin-bottom 分隔项
• 步骤编号放大、加粗，提升可读性，比如 .step-number { font-size: 1.2em; font-weight: bold; }
• 如果步骤超过 4 步，移动端建议改用垂直时间轴或分页式流程，而不是压缩横排

真正麻烦的不是画线，而是状态同步——前端必须确保 active 和 done 类名随业务逻辑实时更新，漏掉一个就断链。样式可以抄，状态管理得自己盯住。