CSS多步进度条 [英] CSS Multistep Progress bar

问题描述

我不知道为什么在第一步的右侧有空间时，我写了13个字母以上。如果我只写第一步，那就没问题。请参阅下面的代码。或者访问我的

解决方案

使用flex代替表格时，当表格根据输入变大时，表格会展开，而当表格展开时，元素之间会有一些间距。这是一个使用flex代替的例子。正如我们现在使用flex，进度条会根据屏幕大小或给定的空间扩大其宽度。

  .container {
 text-align：center; 
颜色：＃20bec6; 
保证金：30vh auto; 
最大宽度：835px; 
宽度：100％; 
 
 .progress  -  bar {
 display：flex; 
 padding：0; 
 
 li {
 list-style-type：none; 
职位：亲属; 
 text-align：center; 
颜色：黑色; 
宽度：100％; 
 
& :: before {
 content：counter（step）; 
反增量：步; 
 width：50px; 
 height：50px; 
 line-height：50px; 
 border：5px solid #ddd; 
 display：block; 
 text-align：center; 
 margin：0 auto 10px auto; 
 border-radius：50％; 
背景颜色：白色; 
} 
 
& :: after {
 content：; 
位置：绝对; 
宽度：100％; 
 height：5px; 
 background-color：#ddd; 
 top：25px; 
剩下：-50％; 
 z-index：-1; 
} 
 
&：：first-child :: after {
 content：none; 
} 
 
& .active {
 color：＃20bec6; 
& :: before {
 border-color：＃20bec6; 
} 
 
 + li :: after {
 background-color：＃20bec6; 
} 
} 
} 
} 
} 
  

I can't figure out why there is space to the right of the first step when i write more then 13 letters in it. If i only write step 1 then it's fine. See below the code. Or visit my codepen. Can someone put me in the right direction, please. I have also included some screen shots when it's working properly.

HTML

<div class="container">
  <ul class="progress--bar">
    <li class="active">Step 1 space to the right</li>
    <li>Step 2 is good</li>
    <li>Step 3 is good</li>
  </ul>
</div>

CSS

.container {
  text-align: center;
  color: #20BEC6;
  margin: 30vh auto;

  .progress--bar {
    counter-reset: step;
    display: table;
    padding: 0;
    width: 100%;

    li {
      list-style-type: none;
      display: table-cell;
      position: relative;
      text-align: center;
      color: black;

      &::before {
        content: counter(step);
        counter-increment: step;
        width: 50px;
        height: 50px;
        line-height: 50px;
        border: 5px solid #ddd;
        display: block;
        text-align: center;
        margin: 0 auto 10px auto;
        border-radius: 50%;
        background-color: white;
      }

      &::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 5px;
        background-color: #ddd;
        top: 25px;
        left: -50%;
        z-index: -1;
      }

      &:first-child::after {
        content: none;
      }

      &.active {
        color: #20BEC6;

        &::before {
          border-color: #20BEC6;
        }

        + li::after {
          background-color: #20BEC6;
        }
      }
    }
  }
}

解决方案

Using flex instead of tables, when the table gets bigger based on the input, the table will expand and while the box expand, there will be some spacing between the elements. Here is an example of using flex instead. As we are now using flex, the progress-bar will expand its width based on the screen size or the room given.

.container {
    text-align: center;
    color: #20bec6;
    margin: 30vh auto;
    max-width: 835px;
    width: 100%;

    .progress--bar {
        display: flex;
        padding: 0;

        li {
            list-style-type: none;
            position: relative;
            text-align: center;
            color: black;
            width: 100%;

            &::before {
                content: counter(step);
                counter-increment: step;
                width: 50px;
                height: 50px;
                line-height: 50px;
                border: 5px solid #ddd;
                display: block;
                text-align: center;
                margin: 0 auto 10px auto;
                border-radius: 50%;
                background-color: white;
            }

            &::after {
                content: "";
                position: absolute;
                width: 100%;
                height: 5px;
                background-color: #ddd;
                top: 25px;
                left: -50%;
                z-index: -1;
            }

            &:first-child::after {
                content: none;
            }

            &.active {
                color: #20bec6;
                &::before {
                    border-color: #20bec6;
                }

                + li::after {
                    background-color: #20bec6;
                }
            }
        }
    }
}

这篇关于CSS多步进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！