我正在尝试构建一个无序列表，如下所示：
- Item 1 | - Item 4
- Item 2 | - Item 5
- Item 3 | - Item 6
我有这个 HTML：
<div class="multi-column">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
和这个CSS：
.multi-column {
-moz-column-count: 2;
-moz-column-gap: 20px;
-moz-column-fill: auto;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
-webkit-column-fill: auto;
column-count: 2;
column-gap: 20px;
column-fill: auto;
}
它按预期构建了两列，但它在左侧放置了 4 个项目，在右侧放置了 2 个项目 (4x2)。我想要的是 3 x 3。
我也尝试使用balance列填充属性中的值，但它不起作用。
我在这里缺少什么？
将多列类赋予 ul 元素而不是 div，它将分割 li 元素<ul>元素分成两列。
<ul class="multi-column">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
and add list-style-position: inside;的CSS.多列 class.
这是解决方案的链接：https://jsfiddle.net/573mtbv5/ https://jsfiddle.net/573mtbv5/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
