CSS3：重疊Div

Question

我正嘗試在iOS的UIWebView控件中使用HTML創建this effect。目標是在列表中創建進度條的效果。到目前爲止，我嘗試了this，但正如你所看到的，通過在diV上添加填充使得所有事情都搞砸了。我怎樣才能達到類似的效果？我沒有使用表格的問題，但似乎會更困難。

感謝

Answer 1

在您所提供的代碼，你有這個div：

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

只需添加 「頂：0像素;」使它變成

<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/並調整爲標題的可變高度。

Answer 2

爲什麼不只是使用嵌套的div，並給內部Div一個百分比的寬度。

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

和CSS：

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

由於div的是塊級元素，他們在默認情況下一個100％的寬度，所以你並不需要顯式地指定它的外層div，如果這是不夠的。

另一種可能性是使用背景漸變，只是移動改變背景位置。