Как сделать обтекание ul li в ряд, без задания ширины для li?

Столкнулся с такой проблемой. Есть список ul, для li задано float: left. В li находятся картинки, ширина li не задается. Т.е. li встают в один ряд, ширина li становится равной ширине картинки. Но при первой загрузке картинки не успевают прогрузиться и каждый li встает с новой строки. После этого, если нажать f5, то li уже выравниваются правильно, в ряд.
Как бы решить эту проблему? Не могу задать ширину для li, т.к. все картинки разной ширины.

<ul>
  <li><img src="1.jpg" alt=""></li>
  <li><img src="1.jpg" alt=""></li>
  <li><img src="1.jpg" alt=""></li>
  <li><img src="1.jpg" alt=""></li>
</ul>

li {
  width: auto;
  float: left;
}