Question

我需要一个简单的CSS进度条（没有jQuery / JS）。我尝试过使用<meter></meter>和{ white-space: nowrap }，但无法在IE11和Chrome 62中正常使用。

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

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

我在<td>上尝试了[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]以及许多其他失败的事情。

我有这个PHP代码：

df.groupby(['CMPLNT_FR_DT', 'Borough']).count()

我得到了这个 - 在＆＃34; 10％＆＃34;之后它有一个换行符：

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

甚至可以将文本集中在进度条中：

我有这个JSFiddle demo。

或者，如果有人能指出我可以支持IE11和Chrome 62以及我的两个提案的好的HTML / CSS进度条，那么这可能也没问题。

更新＃1 - 进一步澄清：

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

我现在有这个：

我想要这个：

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

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

更新＃2 - 接受解决方案：

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

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

Answer 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>

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

1 个答案: