我有一个像这个小提琴
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
解决方法
添加白色空间：nowrap;到外部div,然后将display：left替换为内部div上的display：inline-block
这会强制内部元素显示在一行上,同时防止它们包裹到下一行.
.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;
}
