如何防止列表内容与列间隙打破？

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