How to set image list next to eachother
I have a list of images, but I want all the images to be next to each other. and with horizontal scrolling.
I tried to set the max height for the scroll menu but it hid the 2 images below. I also disabled vertical scrolling, but that doesn't work.
If possible, I only want to use css. if i need javascript to fix this i use JQuery.
My html:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link href="css/index.css" rel="stylesheet"/>
<link href="css/global.css" rel="stylesheet"/>
<meta charset="UTF-8">
</head>
<body>
<div id="list">
<img src="img/1.jpg" class="img">
<img src="img/2.jpg" class="img">
<img src="img/3.jpg" class="img">
<img src="img/4.jpg" class="img">
<img src="img/5.jpg" class="img">
<img src="img/6.jpg" class="img">
<img src="img/7.jpg" class="img">
<img src="img/8.jpg" class="img">
</div>
<div id="output">
</div>
<script src="js/jquery.js"></script>
<script src="js/image.js"></script>
</body>
</html>
my css:
body{
padding:0px;
margin:0px;
overflow-y:hidden;
}
.img{
height:100px;
width:200px;
display:inline-block;
margin-left:0px;
}
.loaded{
width:100%;
}
#list{
overflow-y:hidden;
width:auto;
}
source to share
Just add
white-space: nowrap;
to #list
Since your images are .img
correctly set to inline-block
, you can now control the skipping of the parent with https://developer.mozilla.org/en-US/docs/Web/CSS/white-space (which applies to internal inline, inline block children .)
Nowrap Strips white
space like normal, but suppresses line breaks (text wrapping) in the text.
source to share
As @ roko-c-buljan said, just add white-space: nowrap;
in #list
. This suppresses line breaks in text that have images the way they have display: inline-block
.
body{
padding:0px;
margin:0px;
overflow-y:hidden;
}
.img{
height:100px;
width:200px;
display:inline-block;
margin-left:0px;
}
.loaded{
width:100%;
}
#list{
overflow-y:hidden;
width:auto;
white-space:nowrap;
}
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link href="css/index.css" rel="stylesheet"/>
<link href="css/global.css" rel="stylesheet"/>
<meta charset="UTF-8">
</head>
<body>
<div id="list">
<img src="img/1.jpg" class="img">
<img src="img/2.jpg" class="img">
<img src="img/3.jpg" class="img">
<img src="img/4.jpg" class="img">
<img src="img/5.jpg" class="img">
<img src="img/6.jpg" class="img">
<img src="img/7.jpg" class="img">
<img src="img/8.jpg" class="img">
</div>
<div id="output">
</div>
<script src="js/jquery.js"></script>
<script src="js/image.js"></script>
</body>
</html>
source to share
Are you looking for something like this?
http://codepen.io/kozumii/pen/IoAFb
#list{
overflow-x:scroll;
white-space:nowrap;
}
source to share