Question

我有一个图像列表，但我希望所有图像彼此相邻。而不是水平滚动。

我尝试为滚动菜单设置最大高度，但是他隐藏了下面的2张图片。我也禁用了垂直滚动，但这不起作用。

如果有可能我只想使用css。如果我需要javascript来修复它我使用Jquery。

What I have now

我的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;
}

Answer 1

只需添加

  white-space: nowrap;

到#list

由于您的.img图片已正确设置为inline-block，您现在可以使用https://developer.mozilla.org/en-US/docs/Web/CSS/white-space控制父元素的空白（适用于内部内嵌，< em> inline-block 孩子。）

NOWRAP
像正常一样折叠空格，但是抑制文本中的换行符（文本换行）。

Answer 2

正如@ roko-c-buljan所说，只需将white-space: nowrap;添加到#list即可。这会抑制文本中的换行符，图像与display: inline-block一样。

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

Answer 3

你在找这样的东西吗？

http://codepen.io/kozumii/pen/IoAFb

#list{
  overflow-x:scroll;
  white-space:nowrap;
}

Answer 4

如果您熟悉浮动，可以添加

#list img {
  float:left;
}

如何设置彼此相邻的图像列表

4 个答案: