CSS3でリスト項目を列として表示するにはどうすればよいですか?

CSS3 列を使用してリスト項目を列として表示する

画面サイズに応じてリストを行または列で表示できますか?これは、レスポンシブ Web デザインにおける一般的な課題です。テーブルはオプションですが、CSS3 は columns プロパティを使用してより洗練されたソリューションを提供します。

HTML 構造の例を次に示します:

<div>

これらのリスト項目を列として表示するには、次の CSS を追加します。 :

#limheight {
  height: 300px; /* Your fixed height */
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3; /* Number of columns */
}

#limheight li {
  display: inline-block; /* Necessary */
}

結果は、次のように 3 列のリスト項目になります。表示:

1   4   7
2   5   8
3   6   9

列数の値を調整して列数を変更します。応答性を高めるために、メディア クエリを使用して、画面サイズに基づいて 1 列レイアウトと複数列レイアウトを切り替えることができます。

以上がCSS3でリスト項目を列として表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。