【问题标题】：Horizontal list items水平列表项
【发布时间】：2013-03-29 20:09:40
【问题描述】：

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

    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>

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

【问题讨论】：

见css.maxdesign.com.au/listutorial/index.htm

标签： html css

【解决方案1】：

更新答案

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

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>

【讨论】：

赞成的答案，因为它确实解决了问题，但花车是蹩脚的和旧的！除非你使用 IE7-，否则你应该使用 display:inline-block;
@LifeInTheGrey 这是一个很好的观点 - 我将添加它作为第二个选项 - 谢谢你的提示
调整浏览器窗口大小时列表会折叠 - 有没有办法防止这种情况？理想情况下，列表无论如何都应该保持其水平布局。如何做到这一点？
@Jackson_Sandland 在ul 元素上设置min-width：#my-list{ min-width: 780px; }
为什么要缩放？显示器前面的“*”也是错字吗？

【解决方案2】：

这个小提琴展示了如何

http://jsfiddle.net/9th7X/

ul, li {
    display:inline
}

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

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

【讨论】：

很有可能您的问题与 Bootstrap 没有任何关系。更有可能是您的 CSS 具有导致此 display:inline 指令无效的覆盖。
Firefox 检查元素表示该规则已启用：i.imgur.com/Picq9Lr.png
它在小提琴中有效吗？如果是这样，可能值得提出自己的问题。
@RayLoveless 看看 caniuse.com 的古代资料。

【解决方案3】：

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

ul{
    display:flex;
}

【讨论】：

这个建议解决了我的问题！谢谢
您可能需要添加 justify-content: 以分隔其中的项目。

【解决方案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/

【讨论】：

【解决方案5】：

你也可以使用内联块来避免浮动元素

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

然后样式为：

li{
    /* with fix for IE */
    display:inline;
    display:inline-block;
    zoom:1;
    /*
    additional styles to make it look nice
    */
 }

这样你就不需要浮动任何东西，消除了对 clearfixes 的需要

【讨论】：

我已经尝试过了，但它们仍然没有水平显示 - www.s4nr.com/SpecialTesting
@LoadData 您的菜单宽度为 100 像素，而您的 li 的组合宽度为 128 像素，因此第二项将下拉到下一行。

【解决方案6】：

Here 您可以找到一个工作示例，其中包含有关动态调整列表大小的更多建议。

我使用了 display:inline-block 和百分比填充，以便父列表可以动态更改大小：

display:inline-block;
padding:10px 1%;
width: 30%

加上另外两条规则来删除第一个和最后一个项目的填充。

ul#menuItems li:first-child{padding-left:0;}
ul#menuItems li:last-child{padding-right:0;}

【讨论】：