如何强制水平滚动条出现？

Question

考虑following code：

HTML：

<div id="wrapper">
    <div class='a'></div>
    <div class='a'></div>
    <div class='a'></div>
    <div class='a'></div>
    <div class='a'></div>
</div> 

CSS：

#wrapper {
    width: 300px;
    border: 1px solid black;
    overflow: auto;
}
.a {
    width: 70px;
    height: 70px;
    border: 1px solid red;
    float: left;
}   

如何强制显示水平滚动条而不是在第二行显示红色div？

Answer 1

试试这个：

#wrapper {
  width: 300px;
  border: 1px solid black;
  overflow: auto;
  white-space: nowrap;
}
.a {
  width: 70px;
  height: 70px;
  border: 1px solid red;
  display: inline-block;
}

它会给你内部div之间的间距 - 将它们全部放在一行中以删除它们。