css align images always look same whenever change position each other

i'm trying to align images in div box sized of 900px and all images has different width. But the problem happen when i change orders of images, margin between images should been looked same like before. Does anyone know some tips to solve this problem???

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