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

1

divhere を使用する必要はありません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 に答える