如何在一组进度条中添加竖线？

Question

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

Here is the drawing of want I want to do

Answer 1

在这种情况下，有上千种方法可以达到预期的结果。在最基本的情况下，您可以 absolute 在 relative 定位的父元素中定位元素来实现这一点。

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

Answer 2

你可以试试这个代码 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;
}

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

如何在一组进度条中添加竖线？

How to add vertical lines in a group of progress bars?

html

css

progress-bar