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

237

03 февраля 2020, 12:30

Столкнулся с такой проблемой. Есть список 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;
}

Answer 1

ul { 
  display: flex; 
}

<ul> 
  <li><img src="https://picsum.photos/200/300" alt="1"></li> 
  <li><img src="https://picsum.photos/300/500" alt="2"></li> 
  <li><img src="https://picsum.photos/100/700" alt="3"></li> 
  <li><img src="https://picsum.photos/150/300" alt="4"></li> 
</ul>

Answer 2

ul { 
  display: block; 
  width: 100%; 
  margin: 0; 
  padding: 0; 
  list-style: none; 
} 
 
ul > li { 
  display: inline-block; 
  float: left; 
} 
 
ul::after { /* fix */ 
  content: ''; 
  display: block; 
  clear: both; 
}

<ul> 
  <li><img src="https://via.placeholder.com/100x100?text=li 1" alt=""></li> 
  <li><img src="https://via.placeholder.com/100x100?text=li 2" alt=""></li> 
  <li><img src="https://via.placeholder.com/100x100?text=li 3" alt=""></li> 
  <li><img src="https://via.placeholder.com/100x100?text=li 4" alt=""></li> 
</ul>