Шаг прогресса, чтобы быть горизонтальным в мобильном

Question

Я пытаюсь реализовать индикатор выполнения шага, и я выполнил следующее для настольной версии.

Я хочу, чтобы индикатор выполнения шага был горизонтальным, как

Я добавляю здесь рабочую скрипку - https://jsfiddle.net/Durairaj1696/k1cdmhsj/1/

Мой код:

<ul class="StepProgress" style="float:left;">
    <li data-target="#myCarousel" data-slide-to="0" class="StepProgress-item active">
                                   </li>
    <li data-target="#myCarousel" data-slide-to="1" class="StepProgress-item">
         </li>
    <li data-target="#myCarousel" data-slide-to="2" class="StepProgress-item">
    </li>
    <li data-target="#myCarousel" data-slide-to="3" class="StepProgress-item">
      </li>
</ul>

Заранее спасибо!

Answer 1

Если вы хотите горизонтальный li, внесите изменения, как показано ниже в вашем CSS

.StepProgress-item {
    position: relative;
    display: inline-block; //add display inline block 
    margin-left : 20px; // margin from left
    counter-increment: list;
    font-family: Hellix-SemiBold;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 48px;
    padding-left: 15px;
    
 }

Надеюсь, это поможет. Если у вас возникнут проблемы, дайте мне знать.