最简步骤条应使用语义化的结构，配合display: flex实现横向排列，通过data-current="true"标记当前步，并用媒体查询在小屏下回退为竖排。
用 ol + li 实现最简步骤条，不依赖框架
纯 HTML 就能做出清晰、语义正确、屏幕阅读器友好的步骤指示条——关键不是加样式，而是结构先对。ol 天然表示有序流程，li 每一项就是一步，比用 div 堆砌更可靠。
常见错误是直接写一串 div 或 span，结果无法被辅助工具识别，打印时也丢失顺序。别图省事跳过语义。
示例结构：
<ol class="step-list"> <li>填写基本信息</li> <li>上传身份证照片</li> <li>等待人工审核</li> </ol>
让步骤显示为横向排列，而不是默认竖排
浏览器默认把 ol 渲染成纵向列表，但步骤条通常要横着排。只需一行 CSS 就能改掉：
立即学习“前端免费学习笔记（深入）”；
给 .step-list 加上：display: flex，再给每个 li 加 margin-right 或用 gap 分隔。
注意点：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
flex在 IE10+ 支持良好，如果必须兼容 IE9，得回退到inline-block+vertical-align - 别忘了加
list-style: none去掉默认数字，否则数字和自定义图标会重叠 - 用
flex-wrap: nowrap防止小屏下换行错乱（尤其步骤多时）
标记当前进行中的步骤，用 data-current 比 class 更灵活
动态高亮某一步，推荐用自定义属性 data-current="true"，而不是硬编码 class="active"。好处是 JS 操作更干净，CSS 选择器也明确：
ol.step-list li[data-current="true"] {
color: #007bff;
font-weight: bold;
}
这样 JS 更新状态时只需改属性值，不用反复增删 class，也不怕和其他 class 冲突。初学者容易写成 li.active，结果后续加动画或禁用态时 class 名打架。
额外提醒：
- 别用
:nth-child(2)这类静态选择器来“猜”当前步，业务逻辑一变就失效 - 如果步骤数少且固定，也可以用
aria-current="step"提升可访问性
移动端适配：小屏下自动转为竖排，别强行撑开
横向步骤条在手机上挤成一团，用户得左右拖，体验极差。正确做法是用媒体查询，在宽度小于 768px 时切回竖排：
@media (max-width: 768px) {
.step-list {
flex-direction: column;
}
.step-list li {
margin-right: 0;
}
}
这里容易踩的坑：
- 没设
flex-direction: column，只删了gap，结果还是横着堆成一条线 - 忘记重置
margin或padding，导致竖排时上下间距过大 - 用
vw或固定像素控制字体大小，导致小屏文字看不清
步骤条的复杂点不在视觉动效，而在于状态同步和响应式断点取值——这两处一旦出错，用户根本不知道卡在哪一步。
