CSS

To create a horizontal list with CSS, set display: flex; and flex-wrap: wrap; on the ul element, and add appropriate margins to the li elements.

Horizontal list

　横並びリスト（英: horizontal list）は、アイテムが横方向に並ぶリストのことです。通常、CSSのフレックスボックス（Flexbox）やグリッドレイアウト（Grid Layout）を使用して実装されます。以下は横並びリストの基本的な実装方法の一例です。

特徴

• フレックスボックスは、コンテナ内のアイテムの配置や整列を柔軟に行うために使用されます。横並びリストを簡単に作成することができます。
• グリッドレイアウトは、より複雑なレイアウトに適しており、横並びのリストにも対応できます。

使用シーン

• ナビゲーションメニュー
• ボタンやアイコンの並び
• カードやアイテムの一覧表示

　フレックスボックスとグリッドレイアウトは、どちらもレスポンシブデザインに適しており、画面サイズに応じてアイテムの配置を調整することが可能です。

フレックスボックスを使用した横並びリストの例

<ul class="horizontal-list-flex">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>

.horizontal-list-flex {
	display: flex;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.horizontal-list-flex li {
	margin-right: 10px;
}

グリッドレイアウトを使用した横並びリストの例

<ul class="horizontal-list-grid">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>

.horizontal-list-grid {
	display: grid;
	gap: 10px;
	grid-auto-flow: column;
	list-style-type: none;
	margin: 0;
	padding: 0;
}