Horizontal Scrolling only
I'm trying to create a horizontal scrolling bar which when overflowed will scroll horizontally at the 开发者_如何学编程top of the page. I have tried different combinations of this with overflow values but the inline-div elements that I have in the div with the horizontal settings just creates a line break meaning that the horizontal bar is pointless. This is my code:
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>
If you want horizontal scrolling, you need your content to become larger than the container. It is not possible with floating element or inline element : They fall on the "next line" when there is not enough space left.
2 solutions :
Put your content in an extra-large element.
<div id="files_scroll">
<div id="file_container">
<a class="file_icon">1</a>
<a class="file_icon">2</a>
[...]
with CSS:
#file_container {
width:200%; /*or a javascript calculated value... */
}
Use non-floating/non-inline element.
It is easier but... it use a single row table. There are probably alternatives, but I can't see one right now.
I didn't touch your CSS at all and this works :
<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>
精彩评论