2

我有一个无序列表，我想将其拆分为列，所以我column-count在父 div 上使用 CSS：

<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

4

3 回答 3

5

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

于 2016-06-13T12:57:45.287 回答
1

使 ul 的边距为 0px，因为浏览器具有 ul 的默认值

于 2016-06-13T13:21:08.983 回答
1

你不需要在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>

于 2016-06-13T13:24:54.593 回答