CSS を使用して順序なしリスト項目を水平方向に表示する方法

順序なしリストを横一列に表示する方法

CSS を使用して、さまざまな方法で HTML 要素の書式を設定できます。一般的なスタイル設定タスクの 1 つは、リスト項目を垂直方向ではなく水平方向に配置することです。この記事では、display プロパティを使用してこの効果を実現する方法について説明します。

問題

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

解決策

リスト項目は通常ブロック要素であり、独自の行に表示されることを意味します。水平方向に流れるようにするには、インライン要素に変更する必要があります。これは、display プロパティを使用して行われます。

#ul_top_hypers li {
  display: inline;
}

最初のコードでは、display: inline プロパティを ul 要素自体に適用していました。ただし、これはリスト全体にのみ影響し、個々のリスト項目には影響しません。リスト項目を水平に表示するには、コンテキスト セレクターを使用して、display: inline プロパティをリスト項目に具体的に適用する必要があります。

作業例

これは、表示方法を示す更新されたスニペットです。項目を横方向に一列にリストします:

<div>

#div_top_hypers {
  background-color: #eeeeee;
  display: inline;
}

#ul_top_hypers li {
  display: inline;
}

以上がCSS を使用して順序なしリスト項目を水平方向に表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。