1

なぜ出力が

<div class="tcol">
  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
</div>

と違う

<div>
  <ul class="tcol">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
</div>

このCSSで？

.tcol
{
  -moz-column-count: 3;
  -moz-column-gap: 20px;
  -webkit-column-count: 3;
  -webkit-column-gap: 20px;
  column-count: 3;
  column-gap: 20px;
}

空行がレンダリングされる理由がわかりません。

最初のリストの空の行を削除するか、2 番目のリストの箇条書きを取得するにはどうすればよいですか?

ライブデモはこちら.

4

3 に答える 3

1

margin:0ULに追加

.tcol
{
  -moz-column-count: 3;
  -moz-column-gap: 20px;
  -webkit-column-count: 3;
  -webkit-column-gap: 20px;
  column-count: 3;
  column-gap: 20px;
}
ul{
    margin:0
}

デモ

于 2013-04-26T07:49:16.537 に答える