我有一个步进器，其中活动步骤以蓝色突出显示。
工作片段：
.inline-flex {
display: inline-block;
border-bottom: 2px solid black;
padding-left: 100px;
}
.inline-flex:first-child {
padding-left: initial;
}
.active {
border-bottom: 2px solid blue;
}<div class="steps">
<div class="inline-flex active">Registration</div>
<div class="inline-flex active">Basic Information</div>
<div class="inline-flex">Professional Information</div>
<div class="inline-flex">Others</div>
</div>为了使活动指示，我们将其设为当前步骤标题。
要求：
要求是进度条的100%宽度应该相等。
在上面的例子中有 4 个步骤，所以活动指示应该在那里
- >25%为登记（如果用户在步骤1）
- >50%为基本信息（如果用户在步骤2）
我试图通过使用左填充来实现它，它只在标题结束之前有效。
所以请帮助我将进度条拆分为总宽度。
预期输出：
活跃于步骤 1 注册步骤
Registration Basic Information Step 3
-------blue--------black------black-----black---
使条形具有相同宽度的最简单方法是将它们的总百分比调整为小于 100% 的值。例如：
.inline-flex {
display: inline-block;
border-bottom: 2px solid black;
width: 24%;
}
使用内联块显示时，html 空间和行数占总宽度的一小部分（html-css 恶作剧...），因此您可以像这样编写 html：
<div class="steps">
<div class="inline-flex active">Registration</div><div class="inline-flex active">Basic Information</div><div class="inline-flex">Professional Information</div><div class="inline-flex">Others</div>
</div>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句