如何设置旁边的图像列表

本文介绍了如何设置旁边的图像列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一张图片列表，但我希望所有图片都相邻。而不是水平滚动。

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 ，您可以现在使用（适用于 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.)

这篇关于如何设置旁边的图像列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！