你上一个问题给我的代码,并不能实现水平步骤条
时间: 2024-03-05 17:47:30 浏览: 11
非常抱歉,我之前理解有误。以下是一个实现水平步骤条的示例代码:
```
<div class="step-progress">
<div class="step active">Step 1</div>
<div class="step">Step 2</div>
<div class="step">Step 3</div>
</div>
<style>
.step-progress {
display: flex;
justify-content: space-between;
align-items: center;
}
.step {
width: 100px;
height: 40px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
}
.step.active {
background-color: #007bff;
color: #fff;
border-color: #007bff;
}
.step:not(:first-child) {
margin-left: 20px;
}
.step:not(:last-child)::before {
content: "";
display: block;
width: 20px;
height: 1px;
background-color: #ccc;
position: absolute;
left: 100px;
top: 20px;
}
</style>
```
你可以将以上代码复制到 HTML 文件中并查看效果。该示例基于 flex 布局和伪元素实现水平步骤条,并且支持自定义步骤数量和当前步骤。