将页面分为 4 列：如何保持 ul 列表分组？答案

【问题标题】：Dividing a page into 4 columns: how to keep ul lists grouped?将页面分为 4 列：如何保持 ul 列表分组？
【发布时间】：2015-08-27 08:41:49
【问题描述】：

我有以下页面：

<div class="columns">
  <ul>
    <li class="first">B</li>
    <li>Beta</li>
    <li>Bravo</li>
  </ul>
  <ul>
    <li class="first">C</li>
    <li>Camera</li>
    <li>Chameleon</li>
    <li>Charlie</li>
    <li>Cream</li>
  </ul>
</div>

有更多的uls。

当我使用时

.columns {
  column-count: 4;
}

元素，根据li，可能最终出现在不同的列上。是否可以将uls 分组，以便它们只在整个块中移动？

【问题讨论】：

标签： css multiple-columns

【解决方案1】：

您可以在子元素上使用break-inside: avoid。

CSS-Tricks break-inside

在多列布局中的元素上使用避免来保持财产不会分裂。

.columns {
  column-count: 4;
  -moz-column-count: 4;
  -webkit-column-count: 4;
}
ul {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

<div class="columns">
  <ul>
    <li class="first">B</li>
    <li>Beta</li>
    <li>Bravo</li>
  </ul>
  <ul>
    <li class="first">Camera</li>
    <li>Chameleon</li>
    <li>Charlie</li>
    <li>Cream</li>
  </ul>
  <ul>
    <li class="first">B</li>
    <li>Beta</li>
    <li>Bravo</li>
  </ul>
  <ul>
    <li class="first">Camera</li>
    <li>Chameleon</li>
    <li>Charlie</li>
    <li>Cream</li>
  </ul>
  <ul>
    <li class="first">B</li>
    <li>Beta</li>
    <li>Bravo</li>
  </ul>
  <ul>
    <li class="first">Camera</li>
    <li>Chameleon</li>
    <li>Charlie</li>
    <li>Cream</li>
  </ul>
  <ul>
    <li class="first">B</li>
    <li>Beta</li>
    <li>Bravo</li>
  </ul>
  <ul>
    <li class="first">Camera</li>
    <li>Chameleon</li>
    <li>Charlie</li>
    <li>Cream</li>
  </ul>
</div>

【讨论】：

现在uls 水平展开，而不是垂直展开。 A-B-C-D 换行 E-F-G-H 而不是 A-E-I 换行 B-F-J 等
我已经更新了我的答案，我只使用了 4 列的用例。刚想出 8 列。
设法找到与您完全相同的属性-尚未跨浏览器对其进行测试，但即使它们不起作用，也可以。我会尽快接受答案！