How can I make a div scroll horizontally
I want to create a layout where I would like to align the content horizontally, but let each row scroll horizontally only. Here is my JSFiddle Sample .
.x-scroller{
overflow-x: scroll;
overflow-y:hidden;
height:100px;
width: 300px
}
... The .x DX scroller will be dynamically generated in a loop with its contents, each of the scrolling DIVs will have some content that I would like to scroll horizontally just like you can see in below:
+4
source to share
4 answers
Is this what you are looking for?
.outer {
width: 500px;
height: 100px;
white-space: nowrap;
position: relative;
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.outer div {
width: 24.5%;
background-color: #eee;
float: none;
height: 90%;
margin: 0 0.25%;
display: inline-block;
zoom: 1;
}
<div class="outer">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
+10
source to share
You can solve this problem by manipulating the css white-space property
.x-scroller {
overflow-x: scroll;
overflow-y:hidden;
width: 300px;
white-space: nowrap
}
+3
source to share
You can solve this problem by adding display property to inline block. Screenshot Demo
.x-scroller{
overflow-x: scroll;
overflow-y: hidden;
height: 100px;
width: 300px;
display: inline-block;
white-space: nowrap
}
+2
source to share