css - 强制嵌套的 div/spans 到一行

Question

我的结构类似于这个 fiddle 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; 添加到 outer div，然后将 float:left 替换为 display:inline-block 在 inner div 上

这会强制内部元素显示在一行中，同时防止它们换行到下一行。

Demo Fiddle

.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 更改为:

Demo Fiddle

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