html - 无法使框水平滚动而不是垂直滚动

Question

我遇到了这个问题...
我正在制作一个网站，用户可以在其中从左向右滚动以查看更多详细信息，但只能在特定框中查看。它不是水平滚动，而是垂直滚动。我正在使用 overflow-x:scroll，但它仍然无法正常工作。 float:left 中的所有框，但仍然。我不能让它工作，这个网站需要尽快完成!!这是我的代码:

.announce {
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  width: calc(100% - 20px);
  padding: 10px;
  height:120px;
  overflow-x:scroll;
}

.section {
  float: left;
  margin:10px;
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.9);
}

<div class="announce">
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
</div>

任何事情都值得赞赏。谢谢!

Answer 1

只需调整 div 的大小以适合您的需要，然后就可以了...

.announce {
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  width: calc(100% - 20px);
  padding: 10px;
  height: 120px;
  overflow-x: scroll;
  white-space: nowrap;
}

.section {
  margin: 10px;
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.9);
  display: inline-block;
  *display: inline;/* For IE7*/
  *zoom: 1;/* For IE7*/
  white-space: normal;
}

<div class="announce">
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
</div>