我正在努力创建一个仅使用 HTML 和 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> </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>
最佳答案
- 在
#progress-bar
上,设置position:relative
。 - 在
#progress-level
上,删除margin-top: 133px
并添加bottom: 0
。然后,将高度
更改为更高的数字,例如50%
,以便您可以看到它的工作情况。
关于html - 垂直 CSS 进度条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7698804/