web-dev-qa-db-ja.com

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

私のウェブページには「スキニー」リストがあります。たとえば、それぞれ長さが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項目に増えた場合、新しいリストに対応するために多くの手動調整を行う必要がないように、ソリューションが柔軟であることが望ましいです。

csscss3html-lists
112
user776676

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/

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

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

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

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

230
thirtydot

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;
}

lisにborder-bottomを追加して、左から右へのアイテムの流れをより明確にすることができます。

19
Matt Hampel

事前に設定された数の列が必要な場合は、前述のように、列カウントと列ギャップを使用できます。

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

これは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>
7
Maciej Poleski

この答えは必ずしもscaleではありませんが、リストが大きくなるにつれてわずかな調整のみが必要です。意味的にはtwoリストであるため、少し直感に反しているように見えるかもしれませんが、それを除けば、これまでに作成されたブラウザであなたが望むように見えるでしょう。

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>
3
Alan Hape

サポートできる場合、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%;
1
mattLummus

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

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

デモページ

1
vsync

モバイルファーストの方法は、 CSS Columns を使用して小さな画面のエクスペリエンスを作成することですthenuse Media Queries レイアウトで定義された各ブレークポイントの列数を増やします。

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
Josh Habdas