我有一个图像列表，但我希望所有图像彼此相邻。而不是水平滚动。
我试图为滚动菜单设置最大高度，但他隐藏了下面的 2 个图像。我还禁用了垂直滚动，但这不起作用。
如果可能的话，我只想使用 css。如果我需要 javascript 来修复它，我会使用 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:
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 子级。)
nowrap
Collapses whitespace as for normal, but suppresses line breaks (text wrapping) within text.
关于javascript - 如何设置彼此相邻的图像列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26699589/