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

Question

我的页面上有内容在框中。

它们是这样显示的。

Box1  Box2  Box3  Box4

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

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

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

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

score 0 · Accepted Answer

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

只需要添加

空白：nowrap；

到容器

score 0 · Accepted Answer

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

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

#content {
     width: 800px;
}

2 回答 2