水平列表项

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>

Answer 2

我想我找到的简单解决方案如下

ul{
    display:flex;
}

Answer 3

这个小提琴显示了如何

http://jsfiddle.net/9th7X/

ul, li {
    display:inline
}

关于列表和css的精彩参考:

http://alistapart.com/article/taminglists/

Answer 4

更好的方法是使用inline-block,因为您不再需要clear:both在列表的末尾使用.

试试这个:

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

CSS:

ul > li{
    display:inline-block;
}

看看这里:http://jsfiddle.net/shahverdy/4N6Ap/