强制嵌套div /跨度到一行

Question

我有一个类似这个小提琴的结构http://jsfiddle.net/qqqh1agy/1/

HTML:

<div class="outer">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
</div>

CSS:

.outer{
    width: 100px;
    height:20px;
    overflow: auto;
}
.inner{
    background:red;
    width:50px;
    float:left;
    height:20px
}

我希望内部div与一个水平滚动条在一行上.这可能吗？

任何想法都非常感激

C

Answer 1

添加white-space:nowrap;到outerDIV,然后替换float:left用display:inline-block在inner申报单

这会强制内部元素显示在一行上,同时防止它们包裹到下一行.

演示小提琴

.outer {
    width: 100px;
    height:20px;
    overflow-x: scroll;
    white-space:nowrap; /* <-- force items to display on the same line */ 
}
.inner {
    background:red;
    width:50px;
    height:20px;
    display:inline-block; /* <-- display 'in a row' */ 
}

也就是说,要正确显示滚动条和内容,您可能希望将CSS更改为:

演示小提琴

.outer {
    width: 100px;
    overflow-x: auto; /* <-- show horizontal scrollbar */
    overflow-y:hidden; /* <-- hide vertical scrollbar */
    white-space:nowrap;
}
.inner {
    background:red;
    width:50px;
    height:20px;
    display:inline-block;
}