Horizontal Scrolling, fit to Content Width
我有一个结构如下的页面：
div.wrapper > div.content > div.item div.item
package器的宽度为 320px，而两个 div.item 的宽度约为 600px。我需要将这两个内联显示(现在它们是 display: inline-block;，并且package器的内容水平滚动。当我将 div.content 宽度设置为 auto 时，它需要package器的宽度(320px ). 将宽度设置为 200% 显然可以使水平滚动工作，但我如何让 div.content 采用其内容的宽度以允许水平滚动？
注意：package器设置为固定的宽度和高度，并设置了 overflow-y: hidden 和 overflow-x: scroll，因为我不想要垂直滚动——只需要水平滚动。
JSFiddle 举个例子：
http://jsfiddle.net/kh5k7/
如您所见，红色的 div 将垂直堆叠。将 .content 宽度更改为 200%(或某个值)将导致水平滚动正常发生。不过，我希望这能自动完成，因为我不知道 .content div 中会有多少元素。
- 你可以在jsfiddle中发布你的html css吗？
-
完毕。 jsfiddle.net/kh5k7
在 .content
上使用 white-space:nowrap;
|
1
2
3
4
|
.content{
width: auto;
white-space:nowrap;
}
|
http://jsfiddle.net/kh5k7/1/
你可以有这样的东西：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.wrapper {
overflow-x: auto;
overflow-y: hidden;
}
.content {
width: auto;
white-space: nowrap;
}
.item {
display: inline-block;
}
|
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/269171.html
