如何防止列表突破内部容器与列间隙？

Question

我有一个容器，里面可以是任何内容。大多数时候有一个p标签，但有时也有一些列表。

我有以下代码：

deinit

Nu发生以下情况：名单正在被撕裂！可怜的名单。

我希望li再次连接。我尝试了以下css，但到目前为止它对我不起作用。

<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>

我感谢任何帮助！

谢谢， 罗宾

Answer 1

我发现可能是最简单的解决方案。 （捂脸）

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

Answer 2

代替.content ul li，试试这个：

.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