如何防止列表內容與列間隙打破？

Question

我有一個容器，裏面可以是任何內容。最多的時候有一個p標籤，但有時也有一些列表。

我還挺有以下代碼：

<div class="content"> 
    <ul> 
     <li>Test LI</li> 
     <li>Test LI</li> 
     <li>Test LI</li> 
     <li>Test LI</li> 
     <li>Test LI</li> 
     <li>Test LI</li> 
    </ul> 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.</p> 
</div> 

怒江發生以下情況：該列表被撕裂！可憐的名單。

我希望李的再次連接。我嘗試了以下css，但到目前爲止，它並不適用於我。

.content { 
    -webkit-column-count: 2; 
    -moz-column-count: 2; 
    column-count: 2; 
    -webkit-column-gap: 60px; 
    -moz-column-gap: 60px; 
    column-gap: 60px; 
    margin-bottom: 30px; 
} 

.content ul li { 
    -webkit-column-break-inside: avoid; 
    -moz-column-break-inside:avoid; 
    -moz-page-break-inside:avoid; 
    page-break-inside: avoid; 
    break-inside: avoid-column; 
} 

我感謝任何幫助！

感謝， 羅賓

Answer 1

我可能已經找到了最簡單的解決方案。 （捂臉）而不是.content ul li

.products-post-content ul { 
    display: inline-block; 
} 

Answer 2

，試試這個：

.content ul { 
    margin: 0; 
    -webkit-column-break-inside: avoid; /* Chrome, Safari */ 
    page-break-inside: avoid;   /* Theoretically FF 20+ */ 
    break-inside: avoid-column;   /* IE 11 */ 
    display:table;      /* Actually FF 20+ */ 
} 

JSFiddle

或使用inline-block爲：

.content ul { 
    display: inline-block;     
} 

JSFiddle