HTML元素以水平线显示

Question

我在div中有两个HTML元素。我想将它们显示在一行或一条水平线上。 假设我有两张图片，代码如下所示。如何使它在第一个元素之后没有换行符，因此它们将一个接一个地水平显示。现在第二个图像显示在第一个图像下面。我希望第二个图像显示在第一个图像的右侧。我很确定这可以在CSS中完成。请帮助。

<img src="image one.jpg">
<img src="image two.jpg">

Answer 1

选项1

img {
 display:inline;
}

选项2

img {
 display:block;
 float:left;
}

已更新，以反映当前的浏览器功能

选项3

img {
 display:inline-block;
}

但是，只有在有问题的图像有足够的水平空间时，这才有效。

Answer 2

黑客是在父position: relative;和

上设置div

position: absolute; 
top: 0px; 
left: {left image's computed width}px; 

在第二个。另外，你可以简单地增加div大小。

Answer 3

图像元素是内联元素，因此它们会水平显示，除非您更改了“显示”CSS规则。我认为你没有足够的空间让它们水平放置。

Answer 4

您可以使用CSS（位置属性）或使用表格来执行此操作。默认情况下它不会有换行符，除非图片太宽而无法放在一行上。在这种情况下，迫使它们在同一条线上是值得怀疑的设计。