Невозможно сделать окно прокрутки по горизонтали, а не вертикально

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

Просто исправить проклейки дивы, чтобы удовлетворить то, что вам нужно, и тогда это будет хорошо идти ...

.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>