1. ホーム
  2. html

[解決済み] 横型リストアイテム

2022-03-06 10:10:23

質問

そこで、私がデザインしている新しいウェブサイトで使用するために、水平方向のリストを作成しようとしました。float」をleftに設定するなど、ネットで見つけたいくつかの提案を試しましたが、問題を解決するためにはどれもうまくいきませんでした。

    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;
    }
<ul id="menuItems">
  <li>
    <a href="index.php">Home</a>
  </li>
  <li>
    <a href="index.php">DJ Profiles</a>
  </li>
</ul>

現在、この問題の原因がわからないのですが、どうすれば解決できますか?

解決方法は?

回答を更新しました

多くの人がこの回答を使っていることに気づいたので、少し更新することにしました。現在サポートされていないブラウザのサポートは含まれなくなりました。

ul > li {
    display: inline-block;
    /* You can also add some margins here to make it look prettier */
}
<ul>
    <li> <a href="#">some item</a>

    </li>
    <li> <a href="#">another item</a>

    </li>
</ul>