通过CSS内联显示图像 [英] Display Images Inline via CSS

问题描述

以下是HTML：

 < div id =client_logos> 
< img style =display：inline; margin：0 5px; title =heartica_logosrc =https://s3.amazonaws.com/rainleader/assets/heartica_logo.pngalt =width =150height =50/> 
< img style =display：inline; margin：0 5px; title =mouseflow_logosrc =https://s3.amazonaws.com/rainleader/assets/mouseflow_logo.pngalt =width =150height =50/> 
< img style =display：inline; margin：0 5px; title =piiholo_logosrc =https://s3.amazonaws.com/rainleader/assets/piiholo_logo.pngalt =width =150height =50/> 
< / div> 
  

以下是CSS：

  #client_logos {display：inline-block; } 
  

由于某些原因，它只显示两个相邻的徽标。不知道有什么问题。任何想法？

网址： http：// rainleader.com/who-we-are/

查看截图。

解决方案

您有一个换行符< br> 在标记中的第二张和第三张图片之间。摆脱这一点，它会显示内联。

I have three images that I want to display in a single row next to each other.

Here is the 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:

#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/

See screenshot.

解决方案

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.

这篇关于通过CSS内联显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！