使用页面宽度时，它会向下跳转而不是创建水平溢出

Question

我的页面上有内容。

它们显示如下。

Box1  Box2  Box3  Box4

然后，如果我再添加，它会跳下来并产生垂直溢出。

但我希望它有一个水平滚动条。

这就是包装器在css中的方式。

#content {
    overflow:auto;
    width:100%;
    height:450px;
}

Answer 1

我假设你的意思是这样的：http://jsfiddle.net/9vvtg/

只需将

white-space: nowrap;

添加到容器

即可

Answer 2

#content的宽度引用其父级的宽度，很可能是视口的宽度。如果需要水平滚动，请设置显式宽度。如果您知道包含元素的宽度，只需进行数学运算并设置宽度以匹配，或者延迟并将其设置得更宽。

/* there are four of these */
.insides { 
     width: 200px;
     display: block;
     float: left;
}

#content {
     width: 800px;
}