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

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

使用可能な幅に合わせてリスト項目が垂直方向に流れるレスポンシブなレイアウトを作成できます。 CSS列を使用します。次の手順に従ってください:

1. コンテナ要素の CSS を定義し、高さと必要な列数を指定します:

#limheight {
    height: 300px; /* Adjust to desired fixed height */
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3; /* Placeholder value; can be adjusted */
}

2. 表示プロパティを設定します列内でラップできるようにリスト項目をインラインブロックします:

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

3. 指定された CSS クラスのコンテナ要素で囲まれたリストの HTML を含めます:

<div>

ブラウザ ウィンドウのサイズが変更されると、リスト項目は指定された列数内で自動的に配置を調整し、目的の垂直方向の流れを維持します。

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