如何在一组进度条中添加垂直线？答案

【问题标题】：How to add vertical lines in a group of progress bars?如何在一组进度条中添加垂直线？
【发布时间】：2021-07-23 15:02:00
【问题描述】：

我希望用一些垂直线（我的图纸上的红线）制作进度条，代表进度中的一些步骤。我能够显示进度条，但我完全不知道如何放置垂直线.. 有人可以有一个想法吗？谢谢。

Here is the drawing of want I want to do

【问题讨论】：

你应该发布你目前拥有的代码。

标签： html css progress-bar

【解决方案1】：

你可以试试这个代码 HTML

<div class="chart">
    <div class="horizontal-layer">
        <div class="horizontal">
            <h6 class="text">Skill #1</h6>
            <span class="bar" style="width:50%"></span>
        </div>
        <div class="horizontal">
            <h6 class="text">Skill #2</h6>
            <span class="bar" style="width:60%"></span>
        </div>
        <div class="horizontal">
            <h6 class="text">Skill #3</h6>
            <span class="bar" style="width:90%"></span>
        </div>
        <div class="horizontal">
            <h6 class="text">Skill #4</h6>
            <span class="bar" style="width:80%"></span>
        </div>
        <div class="horizontal">
            <h6 class="text">Skill #5</h6>
            <span class="bar" style="width:100%"></span>
        </div>
    </div>
    <div class="vertical-layer">
        <div class="vertical">
            <h6>Beginner</h6>
            <span class="line"></span>
        </div>
        <div class="vertical">
            <h6>Elementry</h6>
            <span class="line"></span>
        </div>
        <div class="vertical">
            <h6>Intermeiate</h6>
            <span class="line"></span>
        </div>
        <div class="vertical">
            <h6>Advanced</h6>
            <span class="line"></span>
        </div>
        <div class="vertical">
            <h6>Expert</h6>
            <span class="line"></span>
        </div>
    </div>
</div>

和 CSS 代码

.chart{
    max-width: 500px;
    padding: 10px;
    padding-top: 55px;
    position: relative;
}
.horizontal{
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
.horizontal .text{
    flex: 0 0 75px;
}
.bar{
    display: block;
    height: 9px;
    background: #dfdfdf;
    border: 1px solid #777;
}
.vertical-layer{
    position: absolute;
    top: 0;
    left: 85px;
    display: flex;
    justify-content: space-between;
    width: 80%;
    height: 100%;
}
.vertical{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.vertical .line{
    width: 2px;
    height: 100%;
    background: blue;
    display: block;
    border: none;
}

当你将一个轴设为相对于相对父级，第二个轴相对于相对父级时，你会得到这种方法，这里是垂直轴，享受。

【讨论】：

【解决方案2】：

这是有上千种方法可以创造理想结果的情况之一。最基本的，您可以在relative 定位的父元素中absolute 定位元素来实现这一点。

一个例子：https://codepen.io/stevefrost/pen/zYwPwxO

【讨论】：