水平滚动，适合内容宽度

Question

我有一个结构如下的页面：

div.wrapper > div.content > div.item + div.item

包装器的宽度为 320 像素，而两个 div.item 的宽度约为 600 像素。我需要将这两个内联显示（现在它们是display: inline-block;，并且让包装器的内容水平滚动。当我将div.content 宽度设置为auto 时，它需要包装器的宽度（320px）。设置宽度为 200% 显然可以使水平滚动工作，但我如何让 div.content 采用其内容的宽度以允许水平滚动？

注意：包装器设置为固定的宽度和高度，并设置了overflow-y: hidden 和overflow-x: scroll，因为我确实不想要垂直滚动——只需要水平滚动。

JSFiddle 举个例子： http://jsfiddle.net/kh5k7/

如您所见，红色 div 将垂直堆叠。将.content 宽度更改为 200%（或某个值）将导致水平滚动正常发生。不过我希望它自动完成，因为我不知道有多少元素将在 .content div 之前。

Answer 1

在.content 上使用white-space:nowrap;

.content{
   width: auto;
   white-space:nowrap; 
}

http://jsfiddle.net/kh5k7/1/

Answer 2

你可以有这样的东西：

.wrapper {
    overflow-x: auto;
    overflow-y: hidden;
}

.content {
    width: auto;
    white-space: nowrap;
}

.item {
    display: inline-block;
}