CSS3:Überlappende Div. erstellen

Question

Ich versuche zu erschaffen dieser Effekt durch die Verwendung von HTML in der UIWebView-Steuerung von iOS.Das Ziel besteht darin, den Effekt eines Fortschrittsbalkens auf die Auflistung zu erzeugen.Bisher habe ich es versucht Das Aber wie Sie sehen, bringt das Hinzufügen einer Polsterung auf diV alles durcheinander.Wie kann ich einen ähnlichen Effekt erzielen?Ich habe kein Problem damit, die Tabelle zu verwenden, aber das scheint schwieriger zu sein.

Danke

Answer 1

In dem von Ihnen angegebenen Code haben Sie dieses Div:

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

Fügen Sie einfach „top:“ hinzu.0px;" hinzufügen, damit es wird

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

Und es wird korrekt aussehen.

Bearbeiten:Und dann geben Sie die LI-Elemente an position: relative damit es mit mehreren Elementen funktioniert.Sehen http://jsfiddle.net/tFn78/9

Eine andere Version, die etwas sauberer ist: http://jsfiddle.net/v7zNn/ und passt sich der variablen Höhe des Titels an.

Answer 2

Warum nicht nur verschachtelte DIVS verwenden und dem inneren DIV eine prozentuale Breite geben.

generasacodicetagpre.

und css:

generasacodicetagpre.

Da Divils Block-Level-Elemente sind, haben sie standardmäßig eine 100% -e-Breite, sodass Sie ihn nicht explizit für den äußeren DIV angeben müssen, falls dies ausreichend ist.

Eine andere Möglichkeit wäre, einen Hintergrundgradienten zu verwenden und einfach die Hintergrundposition zu ändern.