CSS水平列表项 [英] CSS Horizontal list items

问题描述

所以，我试图创建一个水平列表，用于我正在设计的新网站。我已经尝试了一些在网上已经提出的建议，例如设置'float'左边等等 - 但是这些都没有工作，当涉及到解决问题。

So, I have attempted to create a horizontal list for use on a new website I am designing. I have attempted a number of the suggestions found online already such as setting 'float' to left and such - yet none of these have worked when it comes to fixing the problem.

data-lang =jsdata-hide =falsedata-console =true>

    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>

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

Currently I am unsure of what is causing this issue, how would I go about and resolve it?

推荐答案

更新答案

我注意到很多人都在使用这个答案，所以我决定更新一点。如果你想看到原来的答案，请检查下面。新的回答演示了如何为列表添加一些样式。

Updated Answer

I've noticed a lot of people are using this answer so I decided to update it a little bit. If you want to see the original answer, check below. The new answer demonstrates how you can add some style to your list.

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>

这篇关于CSS水平列表项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！