步驟進度條在移動設備中是水平的

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;

 }

希望這會有所幫助。如果您遇到任何問題，請告訴我。