HTML 元素以水平线显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4550013/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML element display in horizontal line
提问by Web_Designer
I have two HTML elements inside a div. I want to display them in a row or a horizontal line. Let's say I have two images with the code shown below. How would I make it so there is no line break after the first element so they will be displayed one after the other horizontally. Right now the second image is displayed below the first. I want the second image to be displayed to the right of the first. I am pretty sure this can be done in CSS. Please Help.
我在一个 div 中有两个 HTML 元素。我想将它们显示在一行或一条水平线上。假设我有两个图像，代码如下所示。我将如何使它在第一个元素之后没有换行符，因此它们将一个接一个地水平显示。现在第二个图像显示在第一个图像下方。我希望第二个图像显示在第一个图像的右侧。我很确定这可以在 CSS 中完成。请帮忙。
<img src="image one.jpg">
<img src="image two.jpg">
回答by Sandwich
Option 1
选项1
img {
display:inline;
}
Option 2
选项 2
img {
display:block;
float:left;
}
Updated to reflect current browser capabilities
更新以反映当前浏览器功能
Option 3
选项 3
img {
display:inline-block;
}
However, this will only work if there is enough horizontal space for the images in question.
但是，这仅在相关图像有足够的水平空间时才有效。
回答by Babiker
The hack is to set position: relative;on the parent divand
黑客是position: relative;在父母div和
position: absolute;
top: 0px;
left: {left image's computed width}px;
on the second one. Other wise you simple increase the divsize.
在第二个。否则，您只需增加div大小即可。
回答by Pikrass
The image elements are inline elements, so they display horizontally, unless you changed the "display" CSS rule. I think you don't have enough space for them to fit horizontally.
图像元素是内联元素，因此它们水平显示，除非您更改“显示”CSS 规则。我认为你没有足够的空间让它们水平放置。
回答by Jonathan
You can do this with CSS (position attribute) or with a table. It will not have a line break by default unless the pictures are too wide to fit on one line. In that case, it is questionable design to force them to be on the same line.
您可以使用 CSS（位置属性）或表格来完成此操作。默认情况下不会有换行符，除非图片太宽而无法在一行中显示。在这种情况下，强迫它们在同一条线上是有问题的设计。
