Html 通过 CSS 内联显示图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13263186/
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
Display Images Inline via CSS
提问by Trent Scott
I have three images that I want to display in a single row next to each other.
我有三个图像，我想在一行中彼此相邻显示。
Here is the HTML:
这是 HTML：
<div id="client_logos">
<img style="display: inline; margin: 0 5px;" title="heartica_logo" src="https://s3.amazonaws.com/rainleader/assets/heartica_logo.png" alt="" width="150" height="50" />
<img style="display: inline; margin: 0 5px;" title="mouseflow_logo" src="https://s3.amazonaws.com/rainleader/assets/mouseflow_logo.png" alt="" width="150" height="50" />
<img style="display: inline; margin: 0 5px;" title="piiholo_logo" src="https://s3.amazonaws.com/rainleader/assets/piiholo_logo.png" alt="" width="150" height="50" />
</div>
Here is the CSS:
这是CSS：
#client_logos { display: inline-block; }
For some reason, it only displays two logos next to each other. Not sure what's wrong. Any ideas?
出于某种原因，它只显示彼此相邻的两个徽标。不知道出了什么问题。有任何想法吗？
URL: http://rainleader.com/who-we-are/
网址：http: //rainleader.com/who-we-are/
See screenshot.
见截图。
采纳答案by Matthew Blancarte
You have a line break <br>in-between the second and third images in your markup. Get rid of that, and it'll show inline.
您<br>在标记中的第二个和第三个图像之间有一个换行符。摆脱它，它会显示内联。
回答by pkachhia
The code you have posted here and code on your site both are different. There is a break <br>after second image, so the third image into new line, remove this <br>and it will display correctly.
您在此处发布的代码和您网站上的代码都不同。<br>第二张图片后有一个中断，所以第三张图片换行，删除它<br>，它会正确显示。
回答by Vikas Umrao
Place this css in your page:
将此css放在您的页面中：
<style>
#client_logos {
display: inline-block;
width:100%;
}
</style>
Replace
代替
<p><img class="alignnone" style="display: inline; margin: 0 10px;" title="heartica_logo" src="https://s3.amazonaws.com/rainleader/assets/heartica_logo.png" alt="" width="150" height="50" /><img class="alignnone" style="display: inline; margin: 0 10px;" title="mouseflow_logo" src="https://s3.amazonaws.com/rainleader/assets/mouseflow_logo.png" alt="" width="150" height="50" /><img class="alignnone" style="display: inline; margin: 0 10px;" title="mouseflow_logo" src="https://s3.amazonaws.com/rainleader/assets/piiholo_logo.png" alt="" width="150" height="50" /></p>
To
到
<div id="client_logos">
<img style="display: inline; margin: 0 5px;" title="heartica_logo" src="https://s3.amazonaws.com/rainleader/assets/heartica_logo.png" alt="" width="150" height="50" />
<img style="display: inline; margin: 0 5px;" title="mouseflow_logo" src="https://s3.amazonaws.com/rainleader/assets/mouseflow_logo.png" alt="" width="150" height="50" />
<img style="display: inline; margin: 0 5px;" title="piiholo_logo" src="https://s3.amazonaws.com/rainleader/assets/piiholo_logo.png" alt="" width="150" height="50" />
</div>
