步骤进度条在移动设备中不水平工作

Question

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

在桌面上工作的照片喜欢

Desktop Version

当我尝试在无法正常工作的手机上水平操作时，它显示为垂直

手机工作照片

Mobile Version

代码Html：

<div class="progress">      
    <ul1>
        <li>
            <i class="fa fa-check"></i>
            <p>Email</p>
        </li>
        <li>
            <i class="fa fa-refresh"></i>
            <p>Register form</p>
        </li>
        <li>
            <i class="fa fa-times"></i>
            <p>Done</p>
        </li>
    </ul1>
</div>

CSS代码：


.progress{
   margin-left: 10px auto;
}
.progress img{
   width: 80px;
   margin-bottom: 20px;
}
ul1{
   text-align: center;
}
ul1 li{
   display: inline-block;
   width: 200px;
   position: relative;
   margin-top: 10px;
}
ul1 li .fa{
   background: #ccc;
   height: 26px;
   color: #fff;
   border-radius: 50%;
   padding: 5px;
}
ul1 li .fa::after{
   content: '';
   background: #ccc;
   height: 5px;
   width: 205px;
   display: block;
   position: absolute;
   left: 0;
   top: 60px;
   z-index: -1;
}
ul1 li:nth-child(2) .fa{
   background: #ca261a;
}
ul1 li:nth-child(2) .fa::after{
   background: #ca261a;
}
ul1 li:nth-child(1) .fa
{
   background: #60aa97;
}
ul1 li:nth-child(1) .fa::after
{
   background: #60aa97;
}
ul1 li:first-child .fa::after{
   width: 105px;
   left: 100px;
}
ul1 li:last-child .fa::after{
   width: 105px;
}

Answer 1

您使用固定宽度（以像素为单位），而 3 li 的总宽度比屏幕尺寸还宽。

要解决此问题，请使用流动宽度，例如百分比 (%)。

.progress {
    margin-left: 10px auto;
}

.progress img {
    width: 80px;
    margin-bottom: 20px;
}

/* use media queries to smaller font size on small screen to prevent them push bar to vertical. */
.progress p {
    font-size: 12px;
}
@media (min-width: 400px) {
    .progress p {
        font-size: initial;
    }
}


ul {
    list-style: none;
    text-align: center;
}

ul li {
    list-style: none;
    display: inline-block;
    width: 30.33%;/* make it fluid */
    position: relative;
    margin-top: 10px;
}

ul li .fa {
    background: #ccc;
    height: 26px;
    color: #fff;
    border-radius: 50%;
    padding: 5px;
}

ul li .fa::after {
    content: '';
    background: #ccc;
    height: 5px;
    width: 100%;/* make it fluid */
    display: block;
    position: absolute;
    left: 0;
    top: 60px;
    z-index: 0;/* higher than last step */
}

ul li:nth-child(2) .fa {
    background: #ca261a;
}

ul li:nth-child(2) .fa::after {
    background: #ca261a;
}

ul li:nth-child(1) .fa {
    background: #60aa97;
}

ul li:nth-child(1) .fa::after {
    background: #60aa97;
}

ul li:first-child .fa::after {
    width: 100%;
    left: 50%;
}

ul li:last-child .fa::after {
    width: 60%;/* +10 for -10 in left property */
    left: -10%;/* for remove empty space on left */
    z-index: -1;/* put to bottom */
}

<div class="progress">      
    <ul>
        <li>
            <i class="fa fa-check"></i>
            <p>Email</p>
        </li>
        <li>
            <i class="fa fa-refresh"></i>
            <p>Register form</p>
        </li>
        <li>
            <i class="fa fa-times"></i>
            <p>Done</p>
        </li>
    </ul>
</div>

我对你的CSS做了一些改动，请在代码注释中阅读(/* comment */)。

但是，您可能会发现在非常小的屏幕上，字体可能非常小。这是为了防止进度步骤推送到新行。这不是很好的修复，但可以提供帮助。

测试的最小屏幕为 320 像素。

在 jsfiddle 上查看。

步骤进度条在移动设备中不水平工作

Step progress bar not working horizontal in mobile

html

css

bootstrap-4