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

CSS 列: リスト項目を垂直に表示する

リスト項目を列として垂直に表示するという課題に応えて、CSS3 列に目を向けます。この機能を使用すると、目的のレイアウトを簡単に実現できます。

次の HTML コードを考えてみましょう:

<div>

次に、CSS を追加してスタイルを設定します:

#limheight {
    height: 800px; /* Fixed height */
    -webkit-column-count: 3; /* WebKit prefix */
    -moz-column-count: 3; /* Mozilla prefix */
    column-count: 3; /* Standard */
}

#limheight li {
    display: inline-block; /* Necessary for columns to work */
}

CSS 列では、指定した数の列 (この場合は 3) が自動的に作成されます。ブラウザのサイズ変更に応じて列の幅を動的に調整します。これにより、リスト項目が縦方向に整列して配置されます。

CSS 列の機能を活用して、レスポンシブなレイアウトを強化し、リスト項目を列としてエレガントに表示します。

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