如何将我的百分比定位在与进度条相同的行中？

Question

我正在尝试实现图像中所示的UI。然而，在尝试定位组合之后，我现在很难，但我一无所知。有人可以帮我这个吗？

我只想将百分比放在与进度条相同的行中。

这就是我所拥有的：JSFiddle

结果：

Answer 1

这样的东西？

Updated JsFiddle

提供span（百分比数字）和progress_type2百分比width和float:left位置：

td span{
   float:right;
   width:20%;
   text-align:center;
}
.progress_type2 {
   width:80%;
   float:left;
}

Answer 2

尝试将float: left添加到包含进度条的div（他的类为progress_type2）并且还将其添加为宽度，例如：

.progress_type2 {
  float: left;
  width: 70%;
}

Answer 3

与Aminesrine一样，你可以在进度条元素上使用{float：left;}，但你也可以在两个元素上使用{display：inline-block;}或在百分比元素上使用{position：absolute;}。

如果您希望在换行到第二行之前将元素重叠，请使用{position：absolute;上：7px;右：0px}并调整顶部/右侧像素以适合您寻求的设计。记住：无论何时使用绝对定位，都要向父容器授予{position：relative};在这种情况下，表格单元格。

无论您选择哪种方式，请务必测试兼容性和响应性。所有三个选项可能会有不同的结果。