关于html:Horizo??ntal Scrolling, fit to Content Width


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 中会有多少元素。

相关讨论

在 .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;
}