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

I have a container and inside could be any content. The most times there a p-tags but sometimes also some lists.

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

I kinda have the following code:

我有以下代码:

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

Nu the following happens: The list is being torn apart! Poor list.

Nu发生以下情况:名单正在被撕裂!不好的名单。

I want the li's to be connected again. I tried the following css, but it didn't work for me so far.

我希望li再次连接。我试过以下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;
}

I appreciate any help!

我感谢任何帮助!

Thanks, Robin

2 个解决方案

#1

I found probably the most simple solution. (facepalm)

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

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

#2

Instead of .content ul li, try this:

而不是.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

or using inline-block as:

或使用内联块作为:

.content ul {
   display: inline-block;                   
}

JSFiddle