水平清单项目

Question

因此，我尝试创建一个水平列表以在我正在设计的新网站上使用。我已经尝试了许多在网上找到的建议，例如将“
float”设置为左等，但在解决问题时，这些建议均无效。

    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>

目前，我不确定导致此问题的原因是什么，该如何解决？

Answer 1

我注意到很多人都在使用此答案，因此我决定对其进行一些更新。如果您想查看原始答案，请检查以下内容。新答案演示了如何将某些样式添加到列表中。

ul > li {

    display: inline-block;

    /* You can also add some margins here to make it look prettier */

    zoom:1;

    *display:inline;

    /* this fix is needed for IE7- */

}


<ul>

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



    </li>

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



    </li>

</ul>