Ах да, спасибо!

могу понять, почему справа от первого шага есть место, когда я пишу более 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;
        }
      }
    }
  }
}

Ответы на вопрос(1)

когда таблица увеличивается на основе входных данных, таблица будет расширяться, и пока поле расширяется, между элементами будет некоторый интервал. Вот пример использования flex вместо. Поскольку мы сейчас используем 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;
                }
            }
        }
    }
}
 ImJezz22 дек. 2017 г., 00:56
@adeel_s Извините, я пропустил это. Так как flex основан на его месте, чтобы быть отзывчивым, в этом случае контейнер также должен быть отзывчивым. Пожалуйста, добавьтеmax-width: 835px; width: 100%; вместо вашей обычной ширины контейнера.
 Kudos22 дек. 2017 г., 00:52
Привет, это работает, но больше не реагирует?
 Kudos22 дек. 2017 г., 01:01
Ах да, спасибо!

Ваш ответ на вопрос