我的结构类似于这个 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
最佳答案
将 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;
}
关于css - 强制嵌套的 div/spans 到一行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25263022/