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

Question

我希望用一些竖线(我的画上的红线)代表进程中的一些步骤来制作进度条。我能够显示进度条，但我完全不知道如何放置竖线。有人有什么想法吗?谢谢你。

这是我想要做的事情

Answer 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;
}

当你让一个轴相对于相对父轴而另一个轴相对于相对父轴是绝对轴时你就会得到这种方法这是垂直轴，享受吧

Answer 2

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

示例:https://codepen.io/stevefrost/pen/zYwPwxO