2017-05-10 47 views
0

我有一個無序列表,其中包含多個列表項目,分爲4列 - 下圖。防止在無序列表中將列表項對齊,將列表項對齊到列頂部

Unordered list, containing list-items that each contain an image, an h2 element, and separate unordered lists and list-items underneath.

我遇到麻煩列表項的上一級 - 有圖像的那些旁邊的圖像例子 - 打破列,並在下一列開始,如果他們否則會重疊。

我試過設置CSS屬性,每個整個CSS的UI元素,如:

-webkit-column-break-inside:avoid; 
-moz-column-break-inside:avoid; 
-webkit-column-break-inside:avoid; 
-o-column-break-inside:avoid; 

然而,似乎沒有任何改變。我認爲這是可以控制這一點的風格,但我一定是錯的。

我在問什麼,具體而言,是我如何防止列表項的內容封裝到無序列表中的下一列。

+2

張貼足夠的HTML和CSS的代碼段,該問題在您的文章中複製。看看如何創建一個[mcve] –

+0

我會努力獲取一個HTML示例。 – schizoid04

回答

0

我意識到,雖然試圖創建一個樣本進行審查,該問題只發生在我在Internet Explorer中。

添加樣式'break-inside:avoid;'糾正了該瀏覽器中的問題;它似乎並沒有出現在其他風格所涵蓋的瀏覽器中。

+1

我相信大多數時候當你嘗試隔離你的問題時,你最終會在這個過程中解決它。 – zgood

+0

在這種情況下,我實際上無法完全隔離/重新創建問題。 HTML是一個程序化/自動從第三方應用程序生成的頁面;我只能訪問配置正在使用的CSS。大多數html內容是由於java腳本調用而加載的,這些調用只有在您通過身份驗證時纔會起作用,所以我無法找到一種導出HTML的方式,而不僅僅是一個大部分空白的頁面,哈哈。直到我在另一臺服務器上查看應用程序的單獨副本時,我才意識到它在Opera中運行,這是一個單獨的瀏覽器,並建立了連接。 – schizoid04