垂直CSS进度条

我正在创建一个来自底层使用HTML和CSS的进度表。我面临的问题是叠加的图像不在其所属的位置。有人可以帮我吗？垂直CSS进度条

编辑

下面是代码：

<h2>Fall Fest Candy Collection</h2> 
<p>The Fall Fest candy collection has begun! Follow along with the progress bar as we attempt to reach our goal of one million pieces of candy!</p> 
<p>&nbsp;</p> 
<div id="progress-bar"> 
<div id="progress-level" style="height: 79%; bottom: 0px; text-align: center;"></div> 
</div> 
<p style="margin-bottom: 15px; text-align: center;">79% collected</p> 
<p> </p>

来源

2011-10-08 Courtney Stephenson

请在这里发布代码，以便在外部页面消失后问题有益。 –

我刚添加了代码以供将来使用。 –

感谢您的更新！ –

在#progress-bar，设置position: relative。
对#progress-level，删除margin-top: 133px并添加bottom: 0。然后，将height更改为更高的数字，例如50%，以便您可以看到它的工作。

来源

2011-10-08 18:26:41 thirtydot

太棒了！有用！感谢您的帮助。 –

我正在使用Twitter引导程序中的进度条来处理类似的问题，但是当我将内部项目设置为position：relative时，包含项目的border-radius不再停留在内部项目前面...任何想法why ？ – 1nfiniti

@mikeyUX：使用http://twitter.github.com/bootstrap/components.html#progress进行测试，问题发生在Chrome中，但不是Firefox。所以，这可能是一个WebKit错误。 – thirtydot

我会尝试使用位置：相对和底部性质移动＃进度级，但现在我不能尝试一下，我是在移动设备上;-)。

来源

2011-10-08 18:27:22

我固定：

<div id="progress-level" style="height: 7%; margin-top: 76px; text-align: center;"></div>

更改上边距到76px。这是Chrome的开发者工具。

来源

2011-10-08 18:31:03 Kyle

垂直CSS进度条

回答

相关问题