Html 垂直CSS进度条
我正在努力创建一个进度表,它只使用HTML和CSS从下到上。我面临的问题是,叠加的图像没有对齐它所属的位置。有人能帮我吗 编辑 代码如下:Html 垂直CSS进度条,html,css,progress-bar,Html,Css,Progress Bar,我正在努力创建一个进度表,它只使用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 millio
<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>
秋季节日糖果系列
秋季糖果节已经开始!跟随进度条,我们试图达到一百万块糖果的目标
收集79%的数据
- 在
上,设置#进度条
位置:相对
- 在
上,删除#进度级别
并添加页边距顶部:133px
。然后,将底部:0
更改为更高的数值,例如高度
,这样您就可以看到它工作了50%
<div id="progress-level" style="height: 7%; margin-top: 76px; text-align: center;"></div>
将上边距更改为76px。
这是Chrome的开发者工具中的代码。请在这里发布代码,这样在外部页面消失后问题才有意义。我刚刚添加了代码供将来使用。我正在使用Twitter引导的进度条处理类似的问题,但当我将内部项设置为position:relative时,包含项的边框半径不再位于内部项的前面。。。知道为什么吗?@mikeyUX:这个问题的测试发生在Chrome上,而不是在Firefox上。所以,这可能是一个WebKit bug。@thirtydot:谢谢-是的,现在也正在研究这个问题。。。看起来这在某些时候在所有浏览器中都是一个问题&是css3规范实现中关于溢出的问题:隐藏+位置:相对和边界半径结合->在chrome中作为错误记录