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

【问题标题】：How to extend border width in css?如何在css中扩展边框宽度？
【发布时间】：2021-10-20 05:57:54
【问题描述】：

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

工作片段：

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

【问题讨论】：

在.steps类中加入display: flex;和width: 100%;能达到你想要的效果吗？

标签： html css flexbox css-selectors border

【解决方案1】：

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

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

当使用 inline-block 显示时，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>

【讨论】：