自定义进度条 Html 和 CSS 布局答案

【问题标题】：Custom Progress Bar Html and CSS layout自定义进度条 Html 和 CSS 布局
【发布时间】：2023-01-20 15:33:48
【问题描述】：

我正在尝试在进度条的每一端制作一个带有数字的“自定义”进度条。左侧数字是当前值，右侧是最大/目标值。我知道了，所以我显示了两个数字，但我似乎无法正确定位正确的数字。

我想要实现的是......

而我目前拥有的是...

这就是我目前的代码明智......

.progress-outer {
  width: 96%;
  margin: 10px 2%;
  padding: 3px;
  text-align: center;
  background-color: #f4f4f4;
  border: 1px solid #dcdcdc;
  color: #fff;
  border-radius: 20px;
}

.progress-inner {
  min-width: 15%;
  white-space: nowrap;
  overflow: hidden;
  padding: 5px;
  border-radius: 20px;
  background-color: orange;
}

.progressBarCurrent {
  color: black;
  float: left;
}

.progressBarGoal {
  color: black;
  float: right;
}

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

我试过将第二个跨度放在进度内部 div 之外，但随后将文本移到整个内容之外，我无法弄清楚如何将它移到正确的位置。

谁能帮忙？

【问题讨论】：

标签： html css

【解决方案1】：

您可以使用 position:absolute 而不是 float:left

.progress-outer {
  width: 96%;
  margin: 10px 2%;
  padding: 3px;
  text-align: center;
  background-color: #f4f4f4;
  border: 1px solid #dcdcdc;
  color: #fff;
  border-radius: 20px;
    position: relative;
}

.progress-inner {
  min-width: 15%;
  white-space: nowrap;
  overflow: hidden;
  padding: 5px;
  border-radius: 20px;
  background-color: orange;

}

.progressBarCurrent {
  color: black;
  float: left;
}

.progressBarGoal {
  color: black;
  position: absolute;
  right: 5px;
}

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

【讨论】：