CSS で真に水平なリストを作成するには?

水平方向のリスト項目の作成

水平方向のリストを作成しようとすると、リスト項目が水平方向に整列しないという問題が発生する場合があります。この問題を修正するための、簡略化された解決策は次のとおりです。

問題:

ul#menuItems li {
  display: inline;
  list-style: none;
  margin-left: auto;
  margin-right: auto;
  top: 0px;
  height: 50px;
}

display: inline と自動マージンを使用すると、望ましい結果が得られません。

solution:

ul > li {
    display: inline-block;
}

リスト項目に display: inline-block を適用することで、水平方向のフロー内で個別のブロックとして動作します。これにより、各アイテムがそのコンテンツをラップし、水平方向に整列するようになります。

更新されたコード スニペットは次のとおりです:

ul#menuItems {
  background: none;
  height: 50px;
  width: 100px;
  margin: 0;
  padding: 0;
}
ul#menuItems li {
  display: inline-block;
  margin: 0;
  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;
}

以上がCSS で真に水平なリストを作成するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。