web-dev-qa-db-ja.com

単一の順序付けられていないリストから複数の列を作成するにはどうすればよいですか？

このような複数列のリストを作成したいと思います： https://jsfiddle.net/37dfwf4u/

列ごとに異なるリストを使用しても問題ありません。

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>
<ul>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
    <li>item8</li>
</ul>

ul {
    display:inline-block;
}

ただし、CSSが列を自動的に配置するように、連続リストと純粋なCSSでこれを実行できますか？例えば。まだ慣れていないフレックスレイアウトを使用して

csscss3flexboxhtml-listscss-multicolumn-layout
26
Sempervivum

はい。ulをフレックスコンテナにし、flex-directionをcolumnに変更し、flex-wrap: wrapを適用することでラップを許可し、さらに強制的にラップする場合は、説明どおりに複数列のリストを作成できます。 heightの制限：

ul {
  height: 100px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
  <li>item7</li>
  <li>item8</li>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
  <li>item7</li>
  <li>item8</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
  <li>item7</li>
  <li>item8</li>
</ul>
35
Johannes

そのためには、CSS3 Multi-column Layoutの使用を検討してください。

CSS3複数列

1つのリストだけを使用してこれを実行し、CSSで列の数を定義できます。 CSS3 Multi-column layout browser support here をチェックすると、break-before、break-after、break-insideプロパティをサポートしていないため、ほとんどのブラウザーで部分的なサポートを確認できます。ただし、プレフィックス付きの複数列リストを作成するために必要なプロパティはサポートされています。

.container {
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;
}

ul {
  margin: 0;
}
<div class="container">
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
    <li>item8</li>
  </ul>
</div>
15
Greg