20

我有三个图像，我想在一行中并排显示。

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

见截图。在此处输入图像描述

4

3 回答 3

15

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

于 2012-11-07T04:39:32.273 回答
5

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

于 2012-11-07T04:44:23.873 回答
4

将此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>
于 2012-11-07T04:53:08.153 回答