如何将四个均匀分布的图像放在同一行上？答案

【问题标题】：How to put four images spaced evenly apart on the same line?如何将四个均匀分布的图像放在同一行上？
【发布时间】：2016-11-26 19:37:40
【问题描述】：

我是编码新手，如果有人能帮助我将 4 张图像均匀分布在同一行上，我将不胜感激。

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

【问题讨论】：

您可能会发现这个答案很有帮助：stackoverflow.com/a/24680165/1297564

标签： html spacing

【解决方案1】：

有很多方法可以给这只猫剥皮。一种方法是制作一个列表，然后将这些列表项向左浮动。我将响应能力留给您，即当视口变小时会发生什么。确保所有图像的大小相同以获得最佳外观，并且不要使用内联样式调整它们的大小，以便您可以使用媒体查询来获得响应性并正确使用级联。我在每个第二个框上添加了蓝色边框，以便您可以看到图像水平排列：

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

【讨论】：