CODEWITHSUNDEEP
htmlcssscrollhorizontal-scrolling
Paddy Hallihan
Paddy Hallihan

Reputation: 1686

Scroll horizontally and don't drop to the next line

I am trying to get a list that scrolls horizontally instead of dropping on to the next line. I have something like the following but can only see the first items before it drops to the next line. I want this to continue on one line and just scroll horizontally.

div {
  width: 500px;
  overflow-x: scroll;
  max-height: 120px;
}
<div>
  <img src='http://via.placeholder.com/100x100' alt="">
  <img src='http://via.placeholder.com/100x100' alt="">
  <img src='http://via.placeholder.com/100x100' alt="">
  <img src='http://via.placeholder.com/100x100' alt="">
  <img src='http://via.placeholder.com/100x100' alt="">
  <img src='http://via.placeholder.com/100x100' alt="">
  <img src='http://via.placeholder.com/100x100' alt="">
  <img src='http://via.placeholder.com/100x100' alt="">
  <img src='http://via.placeholder.com/100x100' alt="">
</div>

Upvotes: 1

Views: 3619

Answers (3)

Tim Gerhard
Tim Gerhard

Reputation: 3607

This is the easiest and correct way to do this. The other methods do work but the intended way to do is like so:

div.scrollable{
  width:500px;
  height:130px;
  overflow-x:scroll;
  white-space:nowrap;
}
<div class="scrollable">
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
</div>

Upvotes: 6

Fabien Greard
Fabien Greard

Reputation: 1894

Using flex, display: flex, will align horizontally your content (use flex-direction: column for vertical).

div{
  overflow-x:scroll;
  overflow-y:hidden;
  display: flex;
}

div img {
  margin: 2px;
}
<h1> Before </h1>
<div>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
</div>
<h1> After </h1>

Upvotes: 3

billy.farroll
billy.farroll

Reputation: 1921

Try:

.main{
  display: flex;
  flex-direction: row;
  width:500px;
  overflow-x:scroll;
  overflow-y:hidden;
  max-height:120px;
}

.main img {
   
margin: 5px;

}
<div class="main">
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
</div>

Upvotes: 1

Related Questions