为 ul 添加水平滚动条

Question

出于某种原因，我无法防止UL及其LI的换行。我希望UL的宽度恰好是一行上所有LI的宽度（不换行），如果UL超过nav-div（800px）的宽度，我希望nav内出现一个滚动条，以便我可以滚动LI。

我尝试了各种display、whitespace、width和height，但只有在给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

Answer 1

试试这个

ul {
   white-space:nowrap;
}

li {
   display:inline;
}

- j03w

---

就这么简单——只需要去掉浮点数！ - Michiel

是的，但我花了一段时间才能理解你的意思 :P .... 显然，如果浏览器首先遇到空格，它们不会使文本溢出 ... 或者类似于这样的东西，我想这对于最新版本的OS X Firefox，Safari和Chrome都是适用的。 - j03w

如果我使用“class”或“id”做同样的事情，它就不起作用。有人能解释一下为什么吗？ - Yash Vekaria

@YashVekaria，能否放一个jsfiddle上来，这样我们就可以看到为什么它对你不起作用了？ - j03w

简直不敢相信这么简单。我还需要在 ul 标签中添加 overflow-x: auto。 - Anh Hoang

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浏览器，可以在条件注释中添加以下代码来启用inline-block：

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

- kizu

---

结果证明是 float: left 让我遇到了麻烦，它使 UL 没有高度和宽度 - 感谢您的帮助 :) - Michiel

对我来说，添加 vertical-align: top; 就解决了问题。谢谢。 - jyoseph

Answer 3

注意事项：未经测试

你不想为li项目设置宽度吗？

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

然后将宽度设置为固定宽度，并将UL的溢出设置为滚动？

div#nav ul {
    width: 800px;
    overflow: scroll;
}   

这会导致您的 UL 在 li 元素超过 8 个时滚动，这是您想要的吗？

- dougajmcdonald

Answer 4

通过将 <ul> 上的 width 设置为 inherit，您可以使用 overflow 属性 来设置元素的溢出行为。当值为 scroll 时，如果内容的高度和宽度超过了盒子的高度和宽度，则元素的所有内容都将滚动（在 x 和 y 方向上）。

div#nav ul
{
    overflow: scroll;
    width: inherit;
    height: inherit;
}

- Asbjørn Ulsberg

Answer 5

请添加以下规则：

div#nav ul {
   overflow-x: hidden;
   overflow-y: scroll;
   white-space: nowrap;
}

- Yossi Shasho