119

私のウェブページには「細い」リストがあります。たとえば、それぞれ1単語の長さの100アイテムのリストです。スクロールを減らすために、このリストをページの2列または4列に表示したいと思います。CSSでこれを行うにはどうすればよいですか？

<ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

スニペットを展開

リストが200アイテムに増えても、新しいリストに対応するために多くの手動調整を行う必要がないように、私はソリューションが柔軟であることを好みます。

css html-lists

— ユーザー776676
ソース

それを行うライブラリがあります-github.com/yairEO/listBreaker

— vsync

CSSカラムオプションで十分だと思います。このオプションは使いやすく、必要に応じて変更できます。ここで詳細に説明しています-kolosek.com/css-columns

— Zoric

253

CSSソリューションは次のとおりです：http : //www.w3.org/TR/css3-multicol/

ブラウザのサポートはまさにあなたが期待するものです。

Internet Explorer 9以前を除く「どこでも」機能します：http : //caniuse.com/multicolumn

ul {
    -moz-column-count: 4;
    -moz-column-gap: 20px;
    -webkit-column-count: 4;
    -webkit-column-gap: 20px;
    column-count: 4;
    column-gap: 20px;
}

参照： http : //jsfiddle.net/pdExf/

IEのサポートが必要な場合は、JavaScriptを使用する必要があります。次に例を示します。

http://welcome.totheinter.net/columnizer-jquery-plugin/

別の解決策は、IEfloat: leftに対してのみ通常にフォールバックすることです。順序は間違っていますが、少なくとも同じように見えます。

参照： http : //jsfiddle.net/NJ4Hw/

<!--[if lt IE 10]>
<style>
li {
    width: 25%;
    float: left
}
</style>
<![endif]-->

すでに使用している場合は、Modernizrでそのフォールバックを適用できます。

— 三十点
ソース

li各列の最初の上のボーダーを削除する方法はありますか？

— はいバリー

2

これは固定スペースではうまく機能しますが、display：inlineまたはinline-blockを使用する場合のように列が折りたたまれないため、レスポンシブデザインでは問題になります。

— 2015

4

興味深い事実：IEは完全に（IE10以降）接頭辞なしでこの機能をサポートする唯一の主要なデスクトップブラウザです...ああ、皮肉...

— NemoStein

1

list-style-position: inside;私が信じている@vsyncによって指摘された問題に特に対処するこの追加のプロパティを含めることが、クロスブラウザーのより良いサポートに必要になる場合があります。

— ThisClark 2017年

4

@PrafullaKumarSahu：試してくださいli { break-inside: avoid; }：jsfiddle.net/thirtydot/pdExf/903。私はCSS列にあまり詳しくないので、もっと良い方法があるかもしれません。

— thirtydot 2017年

19

IEでも機能するソリューションを探している場合は、リスト要素を左にフロートできます。ただし、これにより、次のような蛇のリストが作成されます。

item 1 | item 2 | item 3
item 4 | item 5

次のようなきちんとした列の代わりに：

item 1 | item 4
item 2 | 
item 3 |

そのためのコードは次のようになります。

ul li {
  width:10em;
  float:left;
}

ボーダーボトムをに追加してli、アイテムの左から右へのフローをより明確にすることができます。

— マット・ハンペル
ソース

特定の数のアイテムで機能する可能性がありますが、結果は2アイテムだけではうまくいきません。

— vsync

「きちんとした列」のための別の実用的なCSSソリューション：stackoverflow.com/q/54982323/1066234

— Kai Noack

10

事前設定された列数が必要な場合は、上記のようにcolumn-countとcolumn-gapを使用できます。

ただし、必要に応じてより多くの列に分割される制限された高さの単一の列が必要な場合、これは表示をフレックスに変更することで非常に簡単に実現できます。

これはIE9や他の一部の古いブラウザーでは機能しません。サポートを確認できますか

<style>
  ul {
    display: -ms-flexbox;           /* IE 10 */
    display: -webkit-flex;          /* Safari 6.1+. iOS 7.1+ */
    display: flex;
    -webkit-flex-flow: wrap column; /* Safari 6.1+ */
    flex-flow: wrap column;
    max-height: 150px;              /* Limit height to whatever you need */
  }
</style>

<ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

スニペットを展開

— マチェイ・ポレスキ
ソース

2

私が求めるものに非常に近い。唯一の欠点は、列の幅がコンテンツに適合しないことです（異なる長さの項目で試してください）。列幅がどのように定義されているかわかりません。たぶん最初の要素のwith？いずれにせよ、これを克服する方法に関する指針はありますか？

— jorgeh

高さではなく列の数を制限することは可能ですか？4つの列に項目を埋める必要があります。CSS column-countは列内の行数を不均一にします。最初の列の6アイテム、

— 4、6、5のように

アイテムに「アイテム1」、「アイテム2」などのラベルを付けて、視聴者が要素の流れを確認できるようにするとよいでしょう

— allkenang

3

この答えは必ずしも拡大縮小する必要はありませんが、リストが大きくなるにつれて、わずかな調整が必要になります。2つのリストであるため、意味的には少し直感に反するように見えるかもしれませんが、それ以外は、これまでに作成されたどのブラウザーでも希望どおりに表示されます。

ul {
  float: left;
}

ul > li {
  width: 6em;
}

<!-- Column 1 -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<!-- Column 2 -->
<ul>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>

スニペットを展開

— アラン・ヘイプ
ソース

2

2020-CSSグリッドを使用してシンプルに保つ

これらの答えの多くは古くなっており、それは2020年であり、まだIE9を使用している人々を可能にするべきではありません。CSSグリッドを使用する方がはるかに簡単です。

コードは非常にシンプルで、を使用して、そこにある列の数を簡単に調整できますgrid-template-columns。これを見て、このフィドルをいじって、ニーズに合わせてください。

.grid-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

<ul class="grid-list">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

スニペットを展開

— maxshuty
ソース

1

これは私にとって最良の解決策です。

— Patee Gutee

1

（現在の）Chrome（Version 52.0.2743.116 m）にはcolumn-count、オーバーフローアイテムやアイテム内の絶対配置要素、特に一部のディメンションの遷移に関するCSSの問題や問題がたくさんあることがわかりました。

それは完全に混乱していて修正できないので、私は単純なjavascriptを通じてこれに取り組んでみました、そしてそれを行うライブラリを作成しました-https://github.com/yairEO/listBreaker

デモページ

— vsync
ソース

私はjQueryカラムナイザープラグインを好みます。私の意見では、それは私がやっていた機能よりも優れていました（アルファベット順、降順または昇順、列数、列幅など）。jQueryのColumnizer - WelcomeToTheInter.Net

— Brandito

@Brandito-ええと、Columnizerコードには、120行程度のコードと比較して、ほぼ1,000行のコードであるため、確かに多くのオプションがあります。しかし、うまく機能します

— vsync

はい、しかし私の問題はリストを1つのリストとして維持する必要がありましたが、より便利なもの/必要なものはユースケースによって異なります。

— Brandito 2017年

0

サポートできる場合は、CSSグリッドが、1次元のリストをレスポンシブなインテリアで2列のレイアウトにする最もクリーンな方法です。

ul {
  max-width: 400px;
  display: grid;
  grid-template-columns: 50% 50%;
  padding-left: 0;
  border: 1px solid blue;
}

li {
  list-style: inside;
  border: 1px dashed red;
  padding: 10px;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
<ul>

スニペットを展開

これらは、2列のレイアウトを提供する2つの重要な行です

display: grid;
grid-template-columns: 50% 50%;

— mattLummus
ソース

0

モバイルファーストの方法は、CSS列を使用して小さい画面のエクスペリエンスを作成し、次にメディアクエリを使用して、レイアウトの定義された各ブレークポイントで列の数を増やすことです。

ul {
  column-count: 2;
  column-gap: 2rem;
}
@media screen and (min-width: 768px)) {
  ul {
    column-count: 3;
    column-gap: 5rem;
  }
}

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

スニペットを展開

— ジョシュ・ハブダス
ソース

0

これが私がやったことです

ul {
      display: block;
      width: 100%;
}

ul li{
    display: block;
    min-width: calc(30% - 10px);
    float: left;
}

ul li:nth-child(2n + 1){
    clear: left;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>0</li>
</ul>

スニペットを展開

— グルケイ
ソース

リストを列に分割する方法はありますか？

2020-CSSグリッドを使用してシンプルに保つ

デモページ