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

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 之间的间距 - 将它们全部放在一行中以删除它们。