水平リスト項目が正しく表示されないのはなぜですか?

水平リスト項目: トラブルシューティングと解決策

gt;

Web サイトの水平リストを作成しようとすると、問題が発生しました「float」を左に設定するなど、一般的に提案されている解決策を適用しているにもかかわらず。この問題を診断して解決するには、提供された HTML と CSS の構造を調べてみましょう。

ul#menuItems {
  background: none;
  height: 50px;
  width: 100px;
  margin: 0;
  padding: 0;
}
ul#menuItems li {
  display: inline;
  list-style: none;
  margin-left: auto;
  margin-right: auto;
  top: 0px;
  height: 50px;
}
ul#menuItems li a {
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
  font-weight: bolder;
  color: #000;
  height: 50px;
  width: auto;
  display: block;
  text-align: center;
  line-height: 50px;
}

分析

提供されたコード構造はほぼ正しいです。 。ただし、「li」要素の「display」プロパティを「inline-block」ではなく「inline」に設定しています。これにより、要素が水平方向に流れることがなくなります。

解決策

水平方向のリストを作成するには、'li' 要素の 'display' プロパティを 'inline-' に変更します。 CSS 内の「ブロック」:

ul#menuItems li {
  display: inline-block;
}

提案に従って CSS を更新すると、リスト項目は次のようになります。意図したとおり、水平方向に表示されます。

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