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

我使用multicolumn 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

您的示例适用于我。

否则根据http://caniuse.com/#feat=multicolumn，大多数浏览器都不支持此功能。

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