CSS3：使Div重叠

Question

我试图通过在iOS的UIWebView控件中使用HTML来创建此效果 。 目的是在列表上创建进度条的效果。 到目前为止，我已经尝试过了，但是如您所见，通过在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/，并调整为标题的可变高度。