用列表项填充DIV

Question

是否可以使用列表项填充<div>，以便当项目到达max-height的{​​{1}}时，它们会从顶部重新开始，但稍微多一点正确的？ （见附图）

Answer 1

您可以使用以下代码

ul {
    -moz-column-count: 4;
    -moz-column-gap: 20px;
    -webkit-column-count: 4;
    -webkit-column-gap: 20px;
    column-count: 4;
    column-gap: 20px;
}
   li::before{
    content:'- ';
}

<div style="width:400px;height:300px;max-height:300px;overflow:hidden">
	<ul>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
	</ul>
</div>