Comment mettre quatre images espacées régulièrement sur la même ligne?

Question

Je suis novice dans le domaine du codage et je serai très reconnaissant si quelqu'un pouvait m'aider à mettre 4 images espacées de façon égale sur la même ligne.

<div id="kudobuzz_badge_widget"></div> 

[su_custom_gallery source="media: 2267" limit="1" link="post" target="blank" width="250" height="120" title="never"] 

[su_custom_gallery source="media: 2267" limit="1" link="post" target="blank" width="250" height="120" title="never"] 

[su_custom_gallery source="media: 2267" limit="1" link="post" target="blank" width="250" height="120" title="never"] 

Answer 1

Il existe de nombreuses façons de peauner ce chat, pour ainsi dire. L'one-way est de faire une liste et de faire ensuite flotter les éléments de liste laissés. Je laisse la réactivité à vous, c'est-à-dire ce qui se passe quand la fenêtre devient plus petite. Assurez-vous que toutes les images ont la même taille pour la meilleure apparence, et ne les taillez pas avec des styles en ligne afin de pouvoir utiliser les requêtes média pour la réactivité et utiliser correctement la cascade. Je mets aux bordures bleues sur chaque case 2 afin que vous puissiez voir les images se bousculent horizontalement:

* { 
 
-webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
ul { 
 
list-style: none; 
 
} 
 

 
ul img { 
 
    display: block; 
 
    width: 100%; 
 
    } 
 

 
ul li { 
 
float: left; 
 
    width: 25%; 
 
} 
 

 
ul li:nth-child(2n) { 
 
border: 1px solid blue; 
 
}

<ul> 
 
    <li><img src="http://placehold.it/100x100"></li> 
 
    <li><img src="http://placehold.it/100x100"></li> 
 
    <li><img src="http://placehold.it/100x100"></li> 
 
    <li><img src="http://placehold.it/100x100"></li> 
 
</ul>