不能使框水平滾動而不是垂直

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>