用列表项填充DIV

Question

是否可以将列表项填充到

中，以便当项目达到

的max-height时，它们从顶部重新开始，但稍微右移一点？（请参见附图）

- Snickbrack

---

有些 display: inline 的东西，但我不知道如何使它垂直... - Snickbrack

请发布您尝试过的代码，这样根据您的方法更容易提供帮助。 - Gottlieb Notschnabel

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>

- Pierre Irani

---

我在li前添加了一个::before，这样你就可以在其前面加上短横线。 - Pierre Irani

谢谢，我用 ::before 和 content: "\2022"; 完成了它。这真是一个非常好的答案！ - Snickbrack

这件事情让人烦恼的是，当我将来需要做类似的事情时，我可能会忘记column-count和column-gap。 - glend

为了避免痛苦的麻烦，请记住这一点。 - Snickbrack