Только горизонтальная прокрутка

Question

Я пытаюсь создать горизонтальную полосу прокрутки, которая при переполнении будет прокручиваться горизонтально вверху страницы. Я пробовал разные комбинации этого со значениями переполнения, но элементы inline-div, которые у меня есть в div с горизонтальными настройками, просто создают разрыв строки, означающий, что горизонтальная полоса не имеет смысла. Это мой код:

CSS:

#files_scroll {
    width: 100%;
    height: 120px;
    background-color: #FFFFFF;
    overflow-x: scroll;
    overflow-y: hidden;
}

.file_icon {
    height: 80px;
    margin: 7px;
    padding-left: 10px;
    display: inline-block;
    padding: 5px;
    float: left;
    background-color: #CCCCCC;
    opacity: 0.5;
    border-radius: 10px;
    width: 90px;
}


<div id="main_content">
            <div id="files_scroll">
               <a class="file_icon">1</a>
               <a class="file_icon">2</a>
               <a class="file_icon">3</a>
               <a class="file_icon">4</a>
               <a class="file_icon">5</a>
               <a class="file_icon">6</a>
               <a class="file_icon">7</a>
            </div>
</div>

Answer 1

Если вы хотите горизонтальную прокрутку, ваш контент должен быть больше контейнера.Это невозможно с плавающим элементом или встроенным элементом: они попадают на «следующую строку», когда не хватает места.

2 решения:

Поместите свой контент в очень большой элемент.

<div id="files_scroll">
    <div id="file_container">
       <a class="file_icon">1</a>
       <a class="file_icon">2</a>
       [...]

с помощью CSS:

#file_container {
    width:200%; /*or a javascript calculated value... */
}

Используйте не плавающий/ не встроенный элемент.

Это проще, но ... он использует одну таблицу строк.Возможно, есть альтернативы, но я не вижу их сейчас.

Я вообще не трогал ваш CSS, и это работает:

<div id="main_content">
    <div id="files_scroll">
        <table><tr>
           <td><a class="file_icon">1</a></td>
           <td><a class="file_icon">2</a></td>
           <td><a class="file_icon">3</a></td>
           <td><a class="file_icon">4</a></td>
           <td><a class="file_icon">5</a></td>
           <td><a class="file_icon">6</a></td>
           <td><a class="file_icon">7</a></td>
           <td><a class="file_icon">8</a></td>
           <td><a class="file_icon">9</a></td>
           <td><a class="file_icon">10</a></td>
           <td><a class="file_icon">11</a></td>
           <td><a class="file_icon">12</a></td>
           <td><a class="file_icon">13</a></td>
           <td><a class="file_icon">14</a></td>
           <td><a class="file_icon">15</a></td>
           <td><a class="file_icon">16</a></td>
           <td><a class="file_icon">17</a></td>
           <td><a class="file_icon">18</a></td>
           <td><a class="file_icon">19</a></td>
           <td><a class="file_icon">20</a></td>
           <td><a class="file_icon">21</a></td>
        </tr></table>
    </div>
</div>