水平列表项

新手上路,请多包涵

所以,我试图创建一个水平列表,用于我正在设计的新网站。我已经尝试了一些已经在网上找到的建议,例如将“浮动”设置为左侧等等 - 但在解决问题时这些都没有奏效。

     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>

目前我不确定是什么导致了这个问题,我将如何着手解决它?

原文由 Christopher Orchard 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 465
2 个回答

更新的答案

我注意到很多人都在使用这个答案,所以我决定稍微更新一下。不再包括对现在不受支持的浏览器的支持。

 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>

原文由 What have you tried 发布,翻译遵循 CC BY-SA 4.0 许可协议

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

ul{
    display:flex;
}

原文由 suban khoja 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题