如何在 css 中扩展边框宽度？

Question

我有一个步进器，其中活动步骤以蓝色突出显示。

工作代码段：

.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---

Answer 1

使条形具有相同宽度的最简单方法是将它们的总百分比调整为小于 100% 的值。例如：

.inline-flex {
  display: inline-block;
  border-bottom: 2px solid black;
  width: 24%;
}

使用行内块显示时，html space 和行数占总宽度的一小部分（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>

如何在 css 中扩展边框宽度？

How to extend border width in css?

html

css

flexbox

css-selectors

border