水平滚动条为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;
}

Answer 1

试试这个

ul {
   white-space:nowrap;
}

li {
   display:inline;
}

Answer 2

您可以使用display: inline-block; white-space: nowrap;包装和/ display: inline或display: inline-block儿童.

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

并且,如果您需要支持IE,请在条件注释中添加此hack以启用其中的inline-blocks:

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