javascript - 如何防止列表在带有列间隙的容器内破裂？

Question

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

我有以下代码:

<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 发生以下情况:列表正在被撕裂!可怜的名单。

我希望 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;
}

感谢您的帮助!

谢谢， 罗宾

Answer 1

我找到了可能是最简单的解决方案。 (捂脸)

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