CSS を使用して複数列のリストを作成するにはどうすればよいですか?

CSS を使用して列にリストを表示する

短い項目を含む長いリストをよりコンパクトな形式で表示したい場合は、列に分割することを検討してください。 CSS は、これに対する簡単な解決策を提供します。

CSS 複数列レイアウト

CSS 複数列レイアウト モジュールを使用すると、内部に作成する列の数を指定できます。要素。適用方法は次のとおりです:

ul {
    column-count: 4;  /* The number of columns */
    column-gap: 20px; /* Space between columns */
}

このコードは、20 ピクセルの間隔をあけて 4 つの列でリストをレンダリングします。

ブラウザーのサポート

CSS 複数列レイアウトは、Internet Explorer 9 を除くすべての最新ブラウザでサポートされています。

Internet Explorer の代替手段

Internet Explorer のサポートが必要な場合は、Columnizer jQuery プラグインなどの JavaScript ソリューションを使用できます。

Internet Explorer の Float へのフォールバック

として代替として、CSS float を使用して、Internet Explorer で同様のレイアウトを実現できます。ただし、このメソッドでは項目の順序は保持されますが、列構造は保持されません。

li {
    width: 25%;
    float: left
}

注: このフォールバックは、Internet Explorer のみを対象とする Modernizr または同様の条件付き読み込み手法と併用できます。 .

以上がCSS を使用して複数列のリストを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。