W3.CSS进度条无法在表格的同一行显示文本和栏-Java 学习之路

我需要一个简单的CSS进度条（没有jQuery / JS） . 我尝试过使用 <progress></progress> 和 <meter></meter> 但无法在IE11和Chrome 62中正常使用 .

理想情况下，我可以显示进度条中嵌入的百分比，但我放弃了，因为文本在0％或100％时不可读，所以我决定将百分比放在进度条旁边 - 但这显然是也不容易 .

我正在使用w3schools Progress Bar，因为它最接近我想要的 . 我有一个表格，我想要显示进度条，但是当我有文本和进度条时，它总是在文本后面添加换行符，使得整个表格由于高度增加而变得更大 .

我在 <td> 上尝试了 { white-space: nowrap } 以及许多其他失败的事情 .

我有这个PHP代码：

[CUT]
$final = "10%";
$color = $final == "100%" ? "w3-green" : "w3-blue";
echo "<td align='left'>$final ";
echo "<div class='w3-light-grey w3-small progress'>";
echo "<div class='w3-container $color w3-round' style='width:$final'></div>";
echo "</div>";
echo "</td>";
[CUT]

我明白了 - 在"10%"之后它有一个换行符：
enter image description here

但是我想让它显示出来 - 一切都在一条线上：
enter image description here

也许甚至可以将文本集中在进度条中：
enter image description here

我有这个JSFiddle demo .

或者，如果任何人都可以指向一个好的HTML / CSS进度条，可以支持IE11和Chrome 62以及我的两个提案，这可能也没问题 .

Update #1 - further clarification:

我尝试过使用Pauls解决方案，它有点帮助，但它并没有让我一路走来 . 例如，我希望条形更薄，但我没有说明在我的第一篇文章中，百分比数字应该与右边对齐，以使其更具可读性 - 但它仍应显示在条形图之前 .

我现在有这个：
enter image description here

我想要这个：
enter image description here

我更新了我的小提琴与Pauls解决方案以及我现在拥有的内容：

https://jsfiddle.net/yz9nn0ck/4/

Update #2 - solution accepted:

我现在使用Pauls解决方案，我已经调整了我的JSFiddle以包含工作解决方案：

https://jsfiddle.net/yz9nn0ck/6/

1 回答

谢谢你清除混乱 . 我在进度条上添加了一个上边距，并使百分比向右对齐，使其保持在进度条旁边 . 正如我在之前的回答中所说，如果您希望在从较小的设备查看时执行其他操作，则应添加@media查询 .

<table width="100%" border="1">
  <!-- Row 2 -->
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td style="width: 25%">
      <div style="width: 25%; float: left; text-align: right;">
        50%
      </div>
      <div class="w3-light-grey" style="width:75%; float: right;">
        <div class="w3-green" style="height:10px;width:50%; margin-top: 6px;"></div>
      </div>
    </td>
    <td>Column 4</td>
  </tr>

回复于 2024-05-04T08:44:34+08:00

W3.CSS进度条无法在表格的同一行显示文本和栏

1 回答

相关问题