水平方向のリスト項目が正しく整列しないのはなぜですか?どうすれば修正できますか?

水平方向のリストの書式設定ソリューション

水平方向の項目リストは一般的な Web デザイン要素ですが、その書式設定は困難な場合があります。あるユーザーは、「float」を左に設定するなどの試みにもかかわらず、水平方向のリストが適切に整列しないという問題に遭遇しました。

提供されたコード サンプルは、水平方向のリストに使用されるマークアップとスタイルを示しています。

ul#menuItems {
  ...
}
ul#menuItems li {
  display: inline;
  ...
}
ul#menuItems li a {
  ...
}

<ul>

この問題は、リスト項目での display: inline の使用によって発生しました。このメソッドはリスト項目を水平方向に整列させますが、それらの間のスペースも削除します。これを解決するには、リスト項目に display: inline-block を使用するようにコードを更新する必要があります:

ul > li {
    display: inline-block;
    /* You can also add some margins here to make it look prettier */
}

この変更により、リスト項目は希望の間隔で水平に表示されます。次の更新された HTML コードも機能します:

<ul>
    
 some item

    
    
 another item

    

以上が水平方向のリスト項目が正しく整列しないのはなぜですか?どうすれば修正できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。