水平滚动，适合内容宽度

Question

我有一个具有以下结构的页面：

div.wrapper＆gt; div.content＆gt; div.item + div.item

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

注意：包装器设置为固定的宽度和高度，并设置overflow-y: hidden和overflow-x: scroll，因为我不想要垂直滚动 - 只是水平。< / p>

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