css - CSS3：制作重叠的 div

Question

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

谢谢

score 2 · Accepted Answer

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

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

和 CSS：

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

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

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

score 1 · Accepted Answer

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

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

只需添加“顶部：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/并调整为标题的可变高度。

2 回答 2