Frage

http://biochrom.fivesite.co.uk/catalogue4.asp

Auf der Seite oben gibt es ein Bild auf der linken Seite schwebte. Auf der rechten Seite davon ist eine Liste mit dem Titel „Eigenschaften“. Die Listenelemente haben ein Hintergrundbild, aber es wird nicht angezeigt. Liste 2 zeigt, wie das Hintergrundbild aussieht.

Wer weiß, wie ich die Kugeln sichtbar machen?

War es hilfreich?

Lösung

Ihr Bild hat eine float: left Eigenschaft. Die Listenelemente werden daher gerendert „hinter“ dem Bild.

margin-left:200px;

auf dem UL-Elemente wird Ihr Problem lösen.

links auf dem UL-Elemente:

Alternativ können Sie einen Schwimmer anwenden. Dies wird es richtig das Bild machen schweben, sondern den folgenden Inhalt auf der gleichen Zeile erscheinen. Sie können dies verhindern, indem das UL-Element Löschen oder Hinzufügen von Elemente nach dem UL-Elemente mit ...

clear:both

... auf sie angewendet.

Weitere Informationen zu diesem Verhalten finden Sie unter http://www.positioniseverything.net/easyclearing finden. html .

Andere Tipps

Ich weiß, das ist ein Jahr alt Post aber andere können wissen wollen ...

Was passiert, wenn Sie ein Content-Management-System verwenden und einige Seiten haben Bilder und einige nicht wollen Sie nicht Ihre Liste Artikel 200px in dem Inhalt sein?

Sie können diese CSS zu Ihrem UL / OL-Element hinzu:

overflow:hidden;

Ich hoffe, das hilft.

Dieser Thread ist alt in der Tat, aber immer relevant ...

Eine weitere alternative Lösung:

display: inline-block;

Diese auf der UL . Es zwingt die gesamte ul nach dem Schwimmer erscheinen. Auf diese Weise können Sie mit einer Seite oder ohne das Bild, und es wird immer korrekt angezeigt (markiert auf FF4, IE7 & 8, Chrome 11).

Alternativ können Sie die list-style-image Eigenschaft anstelle von Hintergrund-Bild. Ich lief in diesem Problem den anderen Tag. Das Textflussverhalten, die Ausstellung über ihre ‚Nachbarn‘ schwebt bezieht sich nur auf ‚Inhalt‘, keine Hintergrundbilder (zum Beispiel)

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top