html - 水平滚动，适合内容宽度

Question

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

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

wrapper 的宽度为 320px，而两个 div.item 的宽度约为 600px。我需要将这两个内联显示(现在它们是 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

使用white-space:nowrap;在 .content

上

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

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