How to put four images spaced evenly apart on the same line?

Question

I'm new to coding and will be so grateful if anyone could help me to put 4 images spaced evenly apart on the same line.

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

You might find this answer helpful: http://stackoverflow.com/a/24680165/1297564 — aradhak, Nov 26 '16 at 08:56

score 0 · Answer 1 · answered Nov 26 '16 at 09:05

There are many ways to skin this cat, as it were. One way is to make a list and then float those list items left. I leave the responsiveness up to you, i.e. what happens when the viewport gets smaller. Make sure all the images are the same size for the best appearance, and don't size them with inline styles so you can use media queries for responsiveness and use the cascade properly. I put in the blue borders on every 2nd box so you can see the images are lining up horizontally:

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

How to put four images spaced evenly apart on the same line?

1 Answers1