Change progress tracker to full span of parent container

问题

I have a progress bar that I want to extend to 100% full width, like the image below, being that it extends its parent width:

But its positioned like this in the center:

I understand that the list items are aligned center, however I am hitting issues trying to fix it myself.

I thought I could align left first circle and the last circle to the right, but then the second and third step circles aren't justified horizontally and the green line of the tracker bar does not align properly between each step circle, which ends up with the green line becoming shorter.

The progress tracker should span the entire width of the red border for guide purposes. The first step circle should align to the left and the last should align to the right.

Any ideas will be much appreciated.

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

回答1:

Here's what I did to your code - there are quite a few changes, so bear with me:

reset the ul padding to zero,
the main change is that the :after in the same li will be the line after the step and not using the :after of the following li (added right: 0 and left: 0 to .progressbar li::after so that it fills the parent li)
make progressbar a flexbox and add flex: 1 to the li (so that each li shares the horizontal width) - this lines up all the lis in a line (note that I have removed the float and width too),
now make the lis a column flexbox with align-items: flex-start - we are almost done except the last step.
add flex-grow: 0 to the last li along with align-self: flex-end and white-space: nowrap (to push it to the right)

See demo below:

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

回答2:

Is this a possible solution for you?

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

来源：https://stackoverflow.com/questions/55440471/change-progress-tracker-to-full-span-of-parent-container

标签

html

css

progress-bar