html - 步进进度条在手机上是水平的

Question

我正在尝试实现步骤进度条，我已经为桌面版本完成了以下操作。

我希望步骤进度条像一样是水平的

我在这里添加工作 fiddle - 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;

 }

希望这会有所帮助。如果您遇到任何问题，请告诉我。