如何使用 CSS 在 HTML 列表中强制水平滚动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9707807/
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
how to force horizontal scrolling in an HTML list using CSS?
提问by frequent
I have a list like this:
我有一个这样的清单：
<div>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</div>
and the following CSS:
以及以下 CSS：
ul {
width: 160px;
height: 100px;
overflow: auto;
}
li {
width: 80px;
display: inline-block;
float: left
}
I'm trying to force the list items to display from left to right, that is
我试图强制列表项从左到右显示，即
one - two - three - four
My problem:
Doing it like this gives me two rows with two items each.
我的问题：
这样做会给我两行，每行两个项目。
Question:
Is there a CSS way to force the list items to all be in a single row so I can use horizontal scrolling? Right now if I set overflow:autoI'm only getting vertical scrollbars, which I don't want.
问题：
是否有一种 CSS 方法可以强制将列表项全部放在一行中，以便我可以使用水平滚动？现在，如果我设置了overflow:auto，我只会得到我不想要的垂直滚动条。
I don't want to set this on the wrapping div. I'm just curious if there is a CSS solution I can use within the list alone.
我不想在包装 div 上设置它。我只是好奇是否有我可以单独在列表中使用的 CSS 解决方案。
Thanks for help!
感谢帮助！
回答by animuson
You can't really scroll floated content. Once it's floated, it's not calculated in the width or height of the parent container by default. Really the <ul>is just expanding to its set width and then not doing anything else.
您无法真正滚动浮动内容。一旦浮动，默认情况下不会以父容器的宽度或高度计算。实际上<ul>只是扩展到其设定的宽度，然后不做任何其他事情。
Removing the float: leftwill make them scrollable. The only problem you'll have then is that there is the extra "space" between each inline-block. You can remove that by removing the line-breaks between each list item. It's not the prettiest thing. Normally I'd use a font-size: 0and then reset the font-size in the list item.
删除float: left将使它们可滚动。唯一的问题是每个内联块之间都有额外的“空间”。您可以通过删除每个列表项之间的换行符来删除它。这还不是最漂亮的。通常我会使用 afont-size: 0然后重置列表项中的字体大小。
You also need to make sure the items don't wrap to a new line when they hit the width of the element.
您还需要确保项目在达到元素的宽度时不会换行。
jsFiddle Examples:
jsFiddle 示例：
回答by MetalFrog
Here's a working fiddle: http://jsfiddle.net/qnYb5/
这是一个工作小提琴：http: //jsfiddle.net/qnYb5/
Relevant CSS:
相关CSS：
ul{
list-style-type:none;
white-space:nowrap;
overflow-x:auto;
}
li{
display:inline;
}
回答by Marc B
You haven't constrained the height of the <ul>, so the browser is free to wrap the 'extra' elements onto their own line. You'll need a height: 1emor whatever to make sure the <ul>can't get taller, forcing everything to scroll horizontally.
您没有限制 的高度<ul>，因此浏览器可以自由地将“额外”元素包装到它们自己的行上。你需要一个height: 1em或任何东西来确保<ul>不能变高，迫使所有东西水平滚动。
回答by daker
You can make it with css+javascript, e.g. (http://www.smoothdivscroll.com/v1-2.htm). Don't think there is a CSS-only sulution (that will work cross-browser).
您可以使用 css+javascript，例如 (http://www.smoothdivscroll.com/v1-2.htm)。不要认为只有 CSS 的 sulution（可以跨浏览器工作）。
