垂直 CSS 进度条
我正在致力于创建一个仅使用 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>
I am working on creating a progress meter that comes from the bottom up using only HTML and CSS. The problem I am facing is that the overlayed image doesn't line up where it belongs. Could someone please help me out?
Edit
Here is the code:
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
#progress-bar上，设置position:relative。#progress-level上，删除margin-top: 133px并添加bottom: 0。然后，将高度更改为更高的数字，例如50%，以便您可以看到它的工作情况。#progress-bar, setposition: relative.#progress-level, removemargin-top: 133pxand addbottom: 0. Then, change theheightto a higher number, say50%, so that you can see it working.我修复了：
将上边距更改为 76px。
那是在 Chrome 的开发者工具中。
I fixed with:
Changed the top margin to 76px.
That was in Chrome's developer tools.
我会尝试使用 position:relative 和 bottom 属性来向上移动 #progress-level，但我现在无法尝试，我使用的是移动设备； -)。
I would try using position:relative and bottom properties to move the #progress-level up, but I can't try it out now, I am on a mobile device ;-) .