如何平衡进度条点

Question

有什么方法可以确保绿线的长度等于左侧和该点之间的长度？即使调整了浏览器的大小？

我不确定最好的方法是什么。我可以使线条的大小相同，但不能在右边保留最后的圆圈，或者只能使其看起来视觉上平衡。

#wrapper1 {
  display: flex;
  left: 0px;
  right: 0px;
}

#item1 {
  box-sizing: border-box;
  display: flex;
  flex: 1 1 0%;
  padding: 24px 0px 41px;
}

#item1:after {
  content: '';
  height: 3px;
  width: 120.313px;
  align-self: center;
  background: rgb(124, 179, 66) none repeat scroll 0% 0% / auto padding-box border-box;
  flex: 1 1 auto;
  opacity: 0.5;
}

#item1:before {
  content: '';
  height: 3px;
  width: 120.313px;
  align-self: center;
  background: rgb(124, 179, 66) none repeat scroll 0% 0% / auto padding-box border-box;
  flex: 1 1 auto;
  opacity: 0.5;
}

#label_wrapper_1 {
  align-self: center;
}

#label_wrapper_1:before {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 5px;
  color: rgba(255, 255, 255, 0.87);
  content: '✓';
  display: inline-block;
  height: 25px;
  min-width: 25px;
  text-align: center;
  align-self: center;
  background: rgb(124, 179, 66) none repeat scroll 0% 0% / auto padding-box border-box;
  border-radius: 40px 40px 40px 40px;
}

#wrapper2 {
  box-sizing: border-box;
  display: flex;
  flex: 1 1 0%;
  padding: 24px 0px 41px;
}

#wrapper2:before {
  content: '';
  height: 3px;
  text-align: center;
  align-self: center;
  background: rgb(124, 179, 66) none repeat scroll 0% 0% / auto padding-box border-box;
  flex: 1 1 auto;
  opacity: 0.5;
}

#label_wrapper_2:before {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 5px;
  color: rgba(255, 255, 255, 0.87);
  content: '✓';
  display: inline-block;
  height: 25px;
  text-align: center;
  width: 25px;
  background: rgb(124, 179, 66) none repeat scroll 0% 0% / auto padding-box border-box;
  border-radius: 40px 40px 40px 40px;
}

<div id="wrapper1">
  <div id="item1">
    <div id="label_wrapper_1">
    </div>
  </div>
  <div id="wrapper2">
    <div id="label_wrapper_2">
    </div>
  </div>
</div>

为您提供方便的小提琴：

http://jsfiddle.net/ha7uqe9x/3/

理想情况下，我希望它看起来像这样：

Answer 1

这是吗？

#wrapper1 {
  display: flex;
  left: 0px;
  right: 0px;
  position:relative;
}

#item1 {
  box-sizing: border-box;
  display: flex;
  flex: 1 1 0%;
  padding: 24px 0px 41px;
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}

#item1:after {
  content: '';
  height: 3px;
  width: 120.313px;
  align-self: center;
  background: rgb(124, 179, 66) none repeat scroll 0% 0% / auto padding-box border-box;
  flex: 1 1 auto;
}

#item1:before {
  content: '';
  height: 3px;
  width: 120.313px;
  align-self: center;
  background: rgb(124, 179, 66) none repeat scroll 0% 0% / auto padding-box border-box;
  flex: 1 1 auto;
}

#label_wrapper_1 {
  align-self: center;
}

#label_wrapper_1:before {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 5px;
  color: rgba(255, 255, 255, 0.87);
  content: '✓';
  display: inline-block;
  height: 25px;
  min-width: 25px;
  text-align: center;
  align-self: center;
  background: rgb(124, 179, 66) none repeat scroll 0% 0% / auto padding-box border-box;
  border-radius: 40px 40px 40px 40px;
}

#wrapper2 {
  box-sizing: border-box;
  display: flex;
  flex: 1 1 0%;
  padding: 24px 0px 41px;
}

#wrapper2:before {
  content: '';
  height: 3px;
  text-align: center;
  align-self: center;
  background: rgb(124, 179, 66) none repeat scroll 0% 0% / auto padding-box border-box;
  flex: 1 1 auto;
}

#label_wrapper_2:before {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 5px;
  color: rgba(255, 255, 255, 0.87);
  content: '✓';
  display: inline-block;
  height: 25px;
  text-align: center;
  width: 25px;
  background: rgb(124, 179, 66) none repeat scroll 0% 0% / auto padding-box border-box;
  border-radius: 40px 40px 40px 40px;
}

<div id="wrapper1">
  <div id="item1">
    <div id="label_wrapper_1">
    </div>
  </div>
  <div id="wrapper2">
    <div id="label_wrapper_2">
    </div>
  </div>
</div>