Html ul 的水平滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7431538/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
horizontal scrollbar for ul
提问by Michiel
For some reason, I can't prevent the UL and it's LI's from wrapping. I want the UL's width to be exactly the width of the LI's on one line (without wrapping) and if the UL becomes wider than the nav-div (800px), I want a scrollbar within the nav so I can scroll the LI.
出于某种原因，我无法阻止 UL 和 LI 的包装。我希望 UL 的宽度恰好是一行上 LI 的宽度（不换行），如果 UL 变得比 nav-div (800px) 宽，我希望在导航内有一个滚动条，以便我可以滚动 LI。
I tried pretty much anything with display, whitespace, width's and height, but I can only get it to work if I give the UL a certain width. This, however, is not an options, since the page is generated and can contain 1-20 LI's.
我几乎尝试了任何显示、空白、宽度和高度的东西，但只有给 UL 一个特定的宽度才能让它工作。然而，这不是一个选项，因为页面是生成的并且可以包含 1-20 个 LI。
Does anyone know how to make a scrollbar come up without setting the UL's width?
有谁知道如何在不设置 UL 宽度的情况下使滚动条出现？
HTML:
HTML：
<div id="nav">
<ul id="navbuttons">
<li>Some text</li>
<li>Some text</li>
...
</ul>
</div>
CSS:
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;
}
回答by j03w
try this
尝试这个
ul {
white-space:nowrap;
}
li {
display:inline;
}
回答by kizu
You can use display: inline-block; white-space: nowrap;for the wrapper and display: inlineor display: inline-blockfor the children.
您可以display: inline-block; white-space: nowrap;用于包装器和/display: inline或display: inline-block用于孩子。
So, it would look like this: http://jsfiddle.net/kizu/98cFj/
所以，它看起来像这样：http: //jsfiddle.net/kizu/98cFj/
And, if you'll need to support IE add this hack in conditional comments to enable inline-blocks in it:
而且，如果您需要支持 IE，请在条件注释中添加此 hack 以inline-block在其中启用s：
.navbuttons,
.navbuttons LI {
display: inline;
zoom: 1;
}
回答by Yossi Shasho
Add the following rule:
添加以下规则：
div#nav ul {
overflow-x: hidden;
overflow-y: scroll;
white-space: nowrap;
}
回答by Asbj?rn Ulsberg
By setting the widthon the <ul>to inherityou can use the overflowpropertyto set the overflow behavior of the element. With the value scroll, all of the element's contents will scroll (in both x and y directions) if the height and the width of the contents overflow that of the box:
通过将widthon设置<ul>为inherit您可以使用该overflow属性来设置元素的溢出行为。使用 value scroll，如果内容的高度和宽度超出框的高度和宽度，则元素的所有内容都将滚动（在 x 和 y 方向）：
div#nav ul
{
overflow: scroll;
width: inherit;
height: inherit;
}
回答by dougajmcdonald
Caveat: Untested
警告：未经测试
Would you not just want to set a width for the li item
你不只是想为 li 项目设置一个宽度吗？
div#nav ul li {
margin-right: 15px;
float: left;
font-size: 12px;
list-style-type: none;
width: 100px;
}
And then set the width to a fixed width and overflow on the UL to scroll?
然后将宽度设置为固定宽度并溢出在 UL 上滚动？
div#nav ul {
width: 800px;
overflow: scroll;
}
This would cause you UL to scroll when your li's went past say 8, is that what you're after?
当你的 li 超过 8 时，这会导致你 UL 滚动，这就是你想要的吗？
