Блог

Главная - Вопросы по программированию - Как добавить вертикальные линии в группу индикаторов выполнения?

Как добавить вертикальные линии в группу индикаторов выполнения?

#html #css #progress-bar

Вопрос:

Я хочу сделать индикаторы прогресса с некоторыми вертикальными линиями (красными линиями на моем чертеже), представляющими некоторые шаги в прогрессии. Я могу отображать индикаторы выполнения, но я абсолютно не знаю, как разместить вертикальные линии.. Может у кого-нибудь есть идея ? Спасибо.

Вот рисунок того, что я хочу сделать

Комментарии:

1. Вы должны опубликовать код, который у вас есть в данный момент.

Ответ №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:

Это одна из тех ситуаций, когда есть тысяча способов добиться желаемого результата. В самом простом случае absolute для достижения этой цели вы можете расположить элементы внутри relative расположенного родительского элемента.

Пример: https://codepen.io/stevefrost/pen/zYwPwxO

Метки: