CSS3：重叠Div

Question

我试图通过在iOS的UIWebView控件中使用HTML来创建this effect。目标是在列表上创建进度条的效果。到目前为止，我尝试this，但正如你所看到的，通过在diV上添加填充使一切都搞砸了。我怎样才能达到类似的效果？我没有使用表的问题，但似乎更难。

由于

Answer 1

为什么不使用嵌套的div并给内部Div一个百分比宽度。

<div><div class="inner"></div></div>

和CSS：

div {
    background-color: blue;
    height: 30px;
}
.inner {
    width: 50%;
    background-color: skyblue;
}

由于div是块级元素，因此默认情况下它们具有100％的宽度，因此如果足够，则不需要为外部div明确指定它。

另一种可能性是使用背景渐变，只需移动改变背景位置。

Answer 2

在您提供的代码中，您有这个div：

<div style='position:absolute;left:0%; background-color: hsl(30,100%,59%);width:30%;z-index:10;'>&nbsp;</div>

只需添加“top：0px;”它变成了

<div style='position:absolute;left:0%; top: 0px; background-color: hsl(30,100%,59%);width:30%;z-index:10;'>&nbsp;</div>

它看起来是正确的。

编辑：然后给出LI元素position: relative以使其适用于多个元素。见http://jsfiddle.net/tFn78/9

另一个更清洁的版本：http://jsfiddle.net/v7zNn/并调整为标题的可变高度。