不能使框水平滚动而不是垂直

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>