Question

所以我有这个非常简单的HTML页面。我想要的只是在一个长行中显示图像。什么是最简单的方法，适用于所有浏览器？

<html>
<head>
<title>My title</title>
</head> 
<body>
<div id="images">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
<img src="5.jpg">
<img src="6.jpg">
</div>
</body>
</html>

Answer 1

如果您希望#images成为一行，则可以关闭word wrapping。

#images {
    white-space: nowrap;
}

<强> JSFiddle

Answer 2

看这个jsbin

我认为这是最简单的方法：

HTML：

<ul>
    <li><img src="1.jpg"></li>
    <li><img src="2.jpg"></li>
    <li><img src="3.jpg"></li>
    <li><img src="4.jpg"></li>
    <li><img src="5.jpg"></li>
    <li><img src="6.jpg"></li>
</ul>

CSS：

ul {
  white-space: nowrap;
}

ul, li {
  list-style: none;
  display: inline;
}

更新：没有换行！

Answer 3

让您的容器div足够宽，以处理所有图片。

假设你的所有图像都是300像素×300像素;如果你有6张图片，你的div将是1800px宽

只需使容器div足够宽以容纳所有图像，它们就不会换行。然后浮动每个图像。

<style>
    #images  {
        width: 1800px;
        height: 300px;
    }
    #images img {
        float: left;
    }
</style>

我怀疑拥有更多CSS知识的人会有更好的方法吗？...

Answer 4

这是Fiddle

#images {
  width: 2000px; /* Increase if needed */
}
#images img {
  width: 300px;
  height: 200px;
  float: left;
}

连续显示图像（HTML）

4 个答案: