爲什麼無序列表在開始時使用CSS column-count留下空白項目？

Question

我有一個無序列表，我想拆分成多列，所以我用CSS column-count父DIV：

<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具有邊距引起的空間。將UL上的邊距設置爲0，您就可以走了。

Answer 2

頁邊距0像素爲UL，因爲瀏覽器有默認值的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>

在這個環節