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具有中性意义。

Answer 2

这是否更符合您的需求：http://jsfiddle.net/GqrnC/16/

您应该使用<div>而不是<hr>，因为<div>是结构元素。

HTML

<div class='outer'>
    <div class='inner'>

    </div>
</div>

CSS

.outer{
    border: 2px solid silver;
    width: 200px;
}
.inner{
    background-color: #c00;
    width: 50%;
    height: 5px;
}

或者，我建议查看jQuery UI progress bar。它完全是为这种情况而构建的，看起来非常棒（如果你想稍后再使用，你可以使用AJAX更新它）。

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

2 个答案: