消失的要點

Question

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

在上面的頁面上有一個圖像浮動到左側。在它的右邊是一個名爲「功能」的列表。列表項目有一個背景圖像，但是，它沒有出現。清單2顯示了背景圖像的外觀。

有誰知道我怎麼能讓子彈可見？

Answer 1

你的圖片有一個float：left屬性。列表項因此呈現在圖像後面。

margin-left:200px; 

上UL元件將解決您的問題。

或者，您可以在UL元素上應用float：left。這將使它浮動到圖像的正確位置，但會使以下內容顯示在同一行上。您可以通過clearing the UL-element避免這種情況，或與UL元素之後添加元素...

clear:both 

...適用於它。

有關此行爲的更多信息，請登錄http://www.positioniseverything.net/easyclearing.html。

Answer 2

或者，您可以使用list-style-image屬性而不是background-image。前幾天我遇到了這個問題：浮動展示在其「鄰居」上的文本包裝行爲僅適用於「內容」，而不適用於背景圖像（例如）。

Answer 3

我知道這是一歲多的文章，但其他人可能想知道...

，如果您使用的是內容管理系統和一些網頁上有圖片&有些不你不希望會發生什麼你的列表項在內容中是200px？

可以將此CSS添加到您的UL/OL元素：

overflow:hidden; 

我希望幫助。

Answer 4

這個線程是老確實，但總是相關...

另一種替代方案：

display: inline-block; 

將這個在UL。它強制整個ul在浮動後出現。這樣，你可以有一個頁面有或沒有圖像，它會始終正確顯示（檢查FF4，IE7 & 8，Chrome 11）。