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

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

使用white-space:nowrap;在.content

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