html - css/html 使用hr标签的简单进度条

Question

我正在尝试使用表示完成百分比的 HR 的宽度属性制作一个简单的进度条。我几年前做过，但出于某种原因，我似乎无法让这个看起来正确。该网站使用表格，所以我将栏放在表格单元格中。我愿意使用纯 css 来完成它，但我希望它像几行代码一样轻便，因为此页面上有很多其他内容必须快速加载。

我可以获得显示漂亮实心条的规则。

<td width=200 style="border: 2px solid silver;padding:none"><hr style="color:#c00;background-color:#c00;height:15px; border:none;" align="left" width=50% /></td> 

其中完成百分比是在服务器端使用 php 设置的。这不是需要轮询的动态栏。只有一个代表完整配置文件的百分比。

理想情况下，我希望条形图填充单元格的百分比等于已完成的百分比，以便实心条形图显示已完成的百分比，右侧的空白区域显示剩余部分。但是，我无法在整个单元格周围找到一个漂亮的规则来填充条形图的一部分。相反，酒吧周围有很多空间。我试过将填充设置为无，但这似乎不起作用。

这是一个 jsfiddle。

http://jsfiddle.net/GqrnC/

感谢您的任何建议。

Answer 1

您必须删除 <hr> 的边距(将 margin: 0 添加到其样式中)以去除多余的空间:http://jsfiddle.net/GqrnC/1/

<table>
  <tr>
    <td width=200 style="border: 2px solid silver;padding:none">
      <hr style="color:#c00;background-color:#c00;height:15px; border:none;
                 margin:0;" align="left" width=50% />
    </td>
  </tr>
</table>

但是，我同意上面的评论，我看不出有任何理由使用 <hr>而不是 <div>为了这。 <hr>具有“分隔符”的语义，这里不是这种情况。 div 具有中性含义。