Question

出于某种原因，我无法阻止UL和它的LI包装。我希望UL的宽度恰好是一行中LI的宽度（没有包装），如果UL变得比nav-div（800px）宽，我想在导航中使用滚动条，这样我就可以滚动LI。 / p>

我尝试了很多显示器，空白，宽度和高度，但是如果我给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-block：

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

Answer 3

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

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

Answer 4

警告：未经测试

您是否只想为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滚动，当你的李过去说8，那是你想要的吗？

Answer 5

添加以下规则：

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

水平滚动条为ul

5 个答案: