ul 的水平滚动条

Question

出于某种原因，我无法阻止 UL 和它的 LI 换行。我希望 UL 的宽度恰好是一行上 LI 的宽度（不换行），如果 UL 变得比 nav-div (800px) 更宽，我想要在导航中有一个滚动条，这样我就可以滚动 LI。

我尝试了几乎所有关于显示、空白、宽度和高度的东西，但只有给 UL 一定的宽度，我才能让它工作。然而，这不是一个选项，因为页面已生成并且可以包含 1-20 个 LI。

有谁知道如何在不设置 UL 宽度的情况下显示滚动条？

HTML:

 <div id="nav">
     <ul id="navbuttons">
          <li>Some text</li>
          <li>Some text</li>
          ...
     </ul>
</div>

CSS：

 div#nav
{
    height: 100px;
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}

div#nav ul li
{
    margin-right: 15px;
    float: left;
    font-size: 12px;
    list-style-type: none;
}

原文由 Michiel 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

试试这个

ul {
   white-space:nowrap;
}

li {
   display:inline;
}

原文由 j03w 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以将 display: inline-block; white-space: nowrap; 用于包装器，将 display: inline 或 display: inline-block 用于孩子。

所以，它看起来像这样：http: //jsfiddle.net/kizu/98cFj/

 .navbuttons {
    display: inline-block;
    overflow: auto;
    overflow-y: hidden;
    max-width: 100%;
    margin: 0 0 1em;
    white-space: nowrap;
    background: #AAA;
}

.navbuttons LI {
    display: inline-block;
    vertical-align: top;
}

而且，如果您需要支持 IE，请在条件注释中添加此 hack 以在其中启用 inline-block ：

 .navbuttons,
.navbuttons LI {
    display: inline;
    zoom: 1;
}

原文由 kizu 发布，翻译遵循 CC BY-SA 4.0 许可协议