Изменить трекер прогресса на полный диапазон родительского контейнера

Question

У меня есть индикатор выполнения, который я хочу расширить до 100% полной ширины, как показано на рисунке ниже, поскольку он расширяет родительскую ширину:

Но оно расположено так в центре:

Я понимаю, что элементы списка выровнены по центру, однако я решаю проблемы, пытаясь исправить это самостоятельно.

Я думал, что смогу выровнять левый первый круг и последний круг вправо, но тогда второй и третий шаговые круги не выровнены по горизонтали, и зеленая линия панели трекера не выравнивается должным образом между каждым круговым шагом, что заканчивается зеленая линия становится короче.

Отслеживающий индикатор должен охватывать всю ширину красной границы для целей руководства. Круг первого шага должен быть выровнен по левому краю, а последний - по правому.

Любые идеи будут высоко оценены.

.container {
  width: 100%;
}

.progressbar {
  counter-reset: step;
  margin: 0;
  border-top: 1px solid red;
}

.progressbar li {
  list-style: none;
  float: left;
  position: relative;
  text-align: center;
  width: 20%;
}

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

.progressbar li::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #ddd;
  top: 16px;
  left: -50%;
  right: 0;
  z-index: -1;
}

.progressbar li:nth-child(1)::after {
  content: none;
}

.progressbar li.active {
  color: green;
}

.progressbar li.active::before {
  border-color: green;
}

.progressbar li.active+li::after {
  background-color: green;
}

<div class="container">
  <ul class="progressbar">
    <li class="">Step 1</li>
    <li class="active">Step 2</li>
    <li class="">Step 3</li>
    <li class="">Step 4</li>
  </ul>
</div>

Answer 1

Вот что я сделал с вашим кодом - изменений довольно много, так что потерпите меня:

• сбросить заполнение ul на ноль,

• основное изменение заключается в том, что :after в то же li будет строкой после шага и без использования :after следующего li (добавлено right: 0 и left: 0 к .progressbar li::after, чтобы заполнить родительский элемент li)

• make progressbar a flexbox и добавление flex: 1 к li (чтобы каждый li разделял горизонтальную ширину) - это выстраивает все li s в строке (обратите внимание, что я удалил float и width тоже),

• теперь сделаем li s столбец flexbox с align-items: flex-start - мы почти закончили за исключением последнего шага .

• добавить flex-grow: 0 к последнему li вместе с align-self: flex-end и white-space: nowrap (чтобы подтолкнуть его вправо)

См. Демо ниже:

.container {
  width: 100%;
}

.progressbar {
  counter-reset: step;
  margin: 0;
  border-top: 1px solid red;
  display: flex;
  padding: 0;
}

.progressbar li {
  list-style: none;
  flex: 1;
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.progressbar li::before {
  content: counter(step);
  counter-increment: step;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border: 1px solid #ddd;
  background-color: white;
  display: block;
  text-align: center;
  border-radius: 50%;
}

.progressbar li::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #ddd;
  top: 16px;
  left: 0;
  right: 0;
  z-index: -1;
}

.progressbar li:last-child {
  flex-grow: 0;
  align-items: flex-end;
  white-space: nowrap;
}

.progressbar li.active {
  color: green;
}

.progressbar li.active::before {
  border-color: green;
}

.progressbar li.active::after {
  background-color: green;
}

/* fixes the right-most line when penultimate step is active */
.progressbar li:nth-last-child(2).active + li:after {
  background-color: green;
}

<div class="container">
  <ul class="progressbar">
    <li class="">Step 1</li>
    <li class="active">Step 2</li>
    <li class="">Step 3</li>
    <li class="">Step 4</li>
  </ul>
</div>

Answer 2

Возможно ли это для вас?

.container {
  width: 100%;
  overflow: hidden; /* EDIT: hide .progressbar negative margins */
}

.progressbar {
  counter-reset: step;
  margin: 0 -12.5% 0 -12.5%; /* EDIT: set negative margins */
  padding: 0; /* EDIT: remove all paddings */
  border-top: 1px solid red;
}

.progressbar li {
  list-style: none;
  float: left;
  position: relative;
  text-align: center;
  width: 25%; /* EDIT: set 1/4 width of .progressbar */
}

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

.progressbar li::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #ddd;
  top: 16px;
  left: -50%;
  right: 0;
  z-index: -1;
}

.progressbar li:nth-child(1)::after {
  content: none;
}

.progressbar li.active {
  color: green;
}

.progressbar li.active::before {
  border-color: green;
}

.progressbar li.active+li::after {
  background-color: green;
}

<div class="container">
  <ul class="progressbar">
    <li class="">Step 1</li>
    <li class="active">Step 2</li>
    <li class="">Step 3</li>
    <li class="">Step 4</li>
  </ul>
</div>