如何将我的百分比与进度条放在同一行？

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（他的class是progress_type2），并给它一个宽度，例如：

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

Answer 3

如 Aminesrine 所说，您可以在进度条元素上使用 {float: left;}，但您也可以在两个元素上使用 {display: inline-block;} 或在百分比上使用 {position: absolute;}元素.

如果您宁愿在换行到第二行之前冒元素重叠的风险，请使用 {position: absolute;顶部：7px； right:0px} 并调整 top/right 像素以适合您寻求的设计。记住：每当你使用绝对定位时，给父容器一个{position: relative}；在本例中，table 单元格。

无论您选择什么选项，请务必测试兼容性和响应能力。这三个选项可能会有不同的结果。

How can I position my percentage in the same line as my progressbar?