步骤进度条在移动设备中是水平的

Question

I am trying to implement step progress bar and I have done the below for desktop version.

I want the step progress bar to be horizontal like

I am adding the working fiddle here - https://jsfiddle.net/Durairaj1696/k1cdmhsj/1/

My code is:

<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>

Thanks in advance!

Answer 1

If you want horizontal li then make changes like below in your 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;

 }

Hope this will help.if you get any problem then let me know.