web-dev-qa-db-fra.com

Afficher les images en ligne via CSS

J'ai trois images que je veux afficher dans une seule rangée les unes à côté des autres.

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

Voici le CSS:

#client_logos { display: inline-block; }

Pour une raison quelconque, il n'affiche que deux logos côte à côte. Je ne sais pas ce qui ne va pas. Des idées?

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

Voir capture d'écran.enter image description here

htmlcsswordpressposition
19
Trent Scott

Vous avez un saut de ligne <br> entre les deuxième et troisième images de votre balisage. Débarrassez-vous de cela, et cela s'affichera en ligne.

14
Matthew Blancarte

Le code que vous avez publié ici et le code sur votre site sont tous deux différents. Il y a une pause <br> après la deuxième image, donc la troisième image dans une nouvelle ligne, supprimez cette <br> et il s'affichera correctement.

5
pkachhia

Placez ce css dans votre page:

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

Remplacer

<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>
3
Vikas Umrao