html - 只要彼此改变位置，对齐图像总是看起来相同

Question

我正在尝试对齐大小为 900 像素的 div 框中的图像，但所有图像的宽度都不同。但是当我更改图像顺序时会出现问题，图像之间的边距应该看起来像以前一样。

有人知道解决这个问题的一些技巧吗？

<ul class="icons">
    <li class="icon-kid left"><img src="img/icon_kid.jpg" alt="" /></li>
    <li class="icon-wifi"><img src="img/icon_wifi.jpg" alt="" /></li>
    <li class="icon-time"><img src="img/icon_time.jpg" alt="" /></li>
    <li class="icon-park right"><img src="img/icon_park.jpg" alt="" /></li>
</ul>

Answer 1

对于图像，您可以使用 nth-child css。在 li 中添加 nth-child。您不需要在 li 中添加额外的类。

li:nth-child(n).