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

Question

我正在尝试使用表示完成百分比的HR的width属性来创建一个简单的进度条.我这些年前做过,但由于某种原因,我似乎无法让这一个看起来正确.该网站使用表格,因此我将栏放在表格单元格中.我愿意用纯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具有中性意义.