2

我正在尝试使用代表完成百分比的 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.ini 设置的。这不是需要轮询的动态栏。只有一个代表完整配置文件的百分比。

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

这是一个jsfiddle。

http://jsfiddle.net/GqrnC/

感谢您的任何建议。

4

2 回答 2

5

您必须从<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>

但是，我同意上面的评论，我认为没有任何理由为此使用 an<hr>而不是 a <div>。具有“分隔符”的<hr>语义，此处并非如此。div 具有中性含义。

于 2012-06-30T22:00:59.990 回答
4

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

你真的应该使用<div>而不是 a<hr>因为 a<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进度条。它是专门为这种情况而构建的，看起来非常棒（如果您想稍后再更新，您可以使用 AJAX 对其进行更新）。​</p>

于 2012-06-30T22:05:53.980 回答