为什么无序列表在 CSS 列数的开头留下空白项？

Question

我有一个无序列表，我想将其分成几列，所以我在父 div:

上使用 CSS column-count

<h1>Mushrooms:</h1>
<div style="column-count:4">
  <ul>
    <li>Porcini</li>
    <li>Shittake</li>
    <li>Button</li>
    <li>Chestnut</li>
    <li>Oyster</li>
    <li>Portobello</li>
    <li>Crimino</li>
    <li>Chanterelle</li>
    <li>Morels</li>
    <li>Enoki</li>
  </ul>
</div>

但是，由于某种原因，这会在第一列的第一行留下一个空行：

如何让我的专栏整洁有序？

有个JSFiddle

Answer 1

UL 有一个 margin-top 导致 space。在 UL 上将 margin-top 设置为 0 就可以了。

Answer 2

为 ul 设置 margin 0px，因为浏览器对 ul 有默认值

Answer 3

这里不需要用div来使用column-count，可以直接申请ul（也不要忘记供应商前缀）

除了 margin（我可以解决您的问题）ul 默认情况下还有 padding，您可能想要重置它。

注意：避免使用内联样式。

body {
  margin: 0
}
ul {
  margin: 0 0 36px 0;
  padding: 0 0 0 20px;
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4
}

<h1>Mushrooms:</h1>
<ul>
  <li>Porcini</li>
  <li>Shittake</li>
  <li>Button</li>
  <li>Chestnut</li>
  <li>Oyster</li>
  <li>Portobello</li>
  <li>Crimino</li>
  <li>Chanterelle</li>
  <li>Morels</li>
  <li>Enoki</li>
</ul>

为什么无序列表在 CSS 列数的开头留下空白项？

Why does an unordered list leave a blank item at the start with CSS column-count?

css

html-lists

css-multicolumn-layout