如何设置旁边的图像列表 [英] how to set a list of images next to eachother
问题描述
我有一张图片列表，但我希望所有图片都相邻。而不是水平滚动。
I have a list of images but i want all the images next to each other. and than with horizontal scroll.
我试图设置滚动菜单的最大高度，但是他隐藏了下面的2张图片。我也禁用垂直滚动，但不起作用。
I tried to set a max height for the scroll menu but that his hide the 2 images below. I also disabled vertical scroll but that doesn't work to.
如果可能我只想使用css。如果我需要JavaScript来解决它，我使用Jquery。
If it is possible I want only use css. if I need javascript to fix it I use Jquery.
我的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>
我的css：
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;
}
推荐答案
只需添加
white-space: nowrap;
至 #list
由于您的 .img 图像被正确设置为 inline-block ，您可以现在使用 https：//developer.mozilla控制父元素的空白。 org / en-US / docs / Web / CSS / white-space （适用于 inline ， inline-block 子目录）。
Since your .img images are correctly set to inline-block you can now control the parent element's whitespace with https://developer.mozilla.org/en-US/docs/Web/CSS/white-space (which applies to the inner inline, inline-block children.)
nowrap
正常情况下折叠空白，但会抑制文本中的换行符（文本换行）。 $ b
nowrap
Collapses whitespace as for normal, but suppresses line breaks (text wrapping) within text.
这篇关于如何设置旁边的图像列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
