html - 列表 css 中 ul 列表的多列

Question

我的 html 页面中有某些 ul 列表。

<div class="multicolumns">
  <ul>
    <li>Main 1</li>
    <li>Main 2
      <ul>
        <li>Sub 1</li>
        <li>Sub 2</li>
        <li>Sub 3</li>
      </ul>
    </li>
    <li>Main 3</li>
    <li>Main 4</li>
  </ul>
</div>

我使用多列 css 自动将列表分为三列。但问题是子列表中断到新列。它应该在主标题下。为此，我尝试了以下 CSS。

.multicolumns {
  -moz-column-count: 3; 
  -moz-column-gap: 10px;
  -moz-column-rule: 0px double #666;
  -webkit-column-count: 3; 
  -webkit-column-gap: 10px;
  -webkit-column-rule: 0px double #666;
  column-count: 3;
  column-gap: 10px;
  column-rule: 0px double #666;;
}  

.multicolumns li {
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  column-break-inside: avoid;
}

预期结果:

但它不起作用。如何解决这个问题？

Answer 1

您的示例适用于我的 Chrome。

否则根据http://caniuse.com/#feat=multicolumn大多数浏览器不支持这个。

除此之外，您使用了错误的属性名称。它称为 break-inside 而不是 column-break-inside，因此如果 Firefox 支持它，它将是 -moz-break-inside。只有 Webkit 使用非标准的 -webkit-column-break-inside。