自定义Progress Bar布局求助：右侧目标值定位异常

要实现目标值固定在进度栏最右侧的效果，核心是将目标值元素脱离橙色进度条的容器，基于外层容器进行定位，具体步骤如下：

1. 调整HTML结构 #

将承载目标值的progressBarGoal标签移至progress-inner外部，与progress-inner同级，共同作为progress-outer的子元素：

<div class="progress-outer">
  <div class="progress-inner" style="width:27%;">
    <span class="progressBarCurrent">50g</span>
  </div>
  <span class="progressBarGoal">180g</span>
</div>

2. 修改CSS样式 #

通过定位属性实现目标值的固定位置，同时保证数值垂直居中：

.progress-outer {
  width: 96%;
  margin: 10px 2%;
  padding: 3px;
  background-color: #f4f4f4;
  border: 1px solid #dcdcdc;
  border-radius: 20px;
  /* 添加相对定位，作为绝对定位元素的参考容器 */
  position: relative;
}

.progress-inner {
  min-width: 15%;
  white-space: nowrap;
  padding: 5px 10px; /* 调整左侧padding，避免当前值贴边 */
  border-radius: 20px;
  background-color: orange;
}

.progressBarCurrent {
  color: black;
}

.progressBarGoal {
  color: black;
  /* 绝对定位到外层容器右侧 */
  position: absolute;
  right: 15px; /* 与外层容器的右侧padding适配 */
  top: 50%;
  /* 垂直居中 */
  transform: translateY(-50%);
}

效果说明 #

• 外层容器设置position: relative后，目标值的绝对定位会基于外层容器的边界计算位置，确保始终显示在进度栏最右侧。
• transform: translateY(-50%)让目标值在垂直方向上完美居中，避免因字体大小变化导致偏移。
• 当前值保留在橙色进度条容器内，随进度条宽度变化始终显示在橙色区域左侧。

内容的提问来源于stack exchange，提问作者Dave Lyons