通过 CSS 内联显示图像答案

【问题标题】：Display Images Inline via CSS通过 CSS 内联显示图像
【发布时间】：2012-10-27 02:57:36
【问题描述】：

我想在一行中并排显示三张图片。

这是 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>

这是 CSS：

#client_logos { display: inline-block; }

由于某种原因，它只显示两个并排的徽标。不知道出了什么问题。有什么想法吗？

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

见截图。

【问题讨论】：

标签： html css wordpress position

【解决方案1】：

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

【讨论】：

如有疑问，请打开您的网络检查器。 :) 很高兴我能帮上忙。
别担心...我被跟踪了。谢谢！

【解决方案2】：

您在此处发布的代码和您网站上的代码都不同。第二张图片后有一个中断<br>，所以第三张图片换行，删除这个<br>，它会正确显示。

【讨论】：

【解决方案3】：

把这个css放在你的页面中：

<style>
   #client_logos {
    display: inline-block;
    width:100%;
    }
  </style>

替换

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

到

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

【讨论】：