CSSマルチステッププログレスバー

Question

最初のステップの右側に13文字以上を書き込むときにスペースがあるのがわかりません。私はステップ1を書いていればいいです。コードの下を参照してください。またはcodepenにアクセスしてください。誰かが正しい方向に私を置くことができますか？私はそれが正常に動作しているときにいくつかのスクリーンショットも含めました。

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

Answer 1

の表は、入力に基づいて大きくなったときに、テーブルが拡大し、しばらくしますボックスを展開すると、要素間に間隔があります。代わりにflexを使用する例を示します。現在、フレックスを使用しているので、プログレスバーは画面サイズまたは指定されたルームに基づいて幅が拡張されます。

.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; 
       } 
      } 
     } 
    } 
}