Отображать изображения Inline через CSS

У меня есть три изображения, которые я хочу отобразить в одной строке рядом друг с другом.

Вот 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; }

По какой-то причине он отображает только два логотипа рядом друг с другом. Не уверен, что случилось. Любые идеи?

URL: http://rainleader.com/who-we-are/

Смотрите снимок экрана.

Ответы

Ответ 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>