ul的水平滚动条

出于某种原因，我无法阻止UL和它的LI包装。我希望UL的宽度恰好是一行（不包装）的LI的宽度，如果UL变得比nav-div（800px）更宽，我需要导航栏内的滚动条，以便滚动LI。ul的水平滚动条

我对显示器，空白，宽度和高度进行了几乎所有的尝试，但是我只能让它工作，如果我给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; 
}

来源

2011-09-15 Michiel

试试这个

ul { 
    white-space:nowrap; 
} 

li { 
    display:inline; 
}

来源

2011-09-15 14:49:24 j03w

这么简单 - 只需要摆脱浮动！ – Michiel

是的，但它花了我一段时间，然后我才能知道你知道：P ....显然浏览器不会让文本溢出，如果他们先用空白打...或类似的东西，我认为这是真正的最新版本的OS X Firefox，Safari，Chorome – j03w

也将li显示器设置为内嵌块作品。 –

通过设置在<ul>到inherit可以使用overflow property来设置元素的溢出行为width。随着值scroll，所有的元件的内容将滚动（在x和y方向），如果高度和内容的宽度溢出，箱的：

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

来源

2011-09-15 13:25:47

警告：未经测试

将你不只是想设置一个宽度为李家项目

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，那是你在做什么之后？

来源

2011-09-15 13:26:19 dougajmcdonald

可以使用display: inline-block; white-space: nowrap;为包装和display: inline或display: inline-block的孩子。

因此，它应该是这样的：http://jsfiddle.net/kizu/98cFj/

而且，如果你需要支持IE的条件注释添加这个技巧，使inline-block，它出现：

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

来源

2011-09-15 21:17:55 kizu

事实证明这是'漂浮：左'，这给了我麻烦，它使UL的高度和宽度更低 - 感谢您的帮助:) – Michiel

添加以下规则：

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

来源

2012-07-11 05:48:39

ul的水平滚动条

回答

相关问题