0
150
Views¿Cómo mover imágenes dentro de una etiqueta de lista a la siguiente línea?
así que he usado una etiqueta img dentro de una etiqueta de lista para mostrar 5 imágenes que se mostrarán en línea y quiero agregar más imágenes debajo de las imágenes actuales en el mismo orden cuando agrego más imágenes, todo se muestra en la misma línea, ¿cómo puedo? pasar a la siguiente línea?
<body> <div class="imgBox"><img src="" alt="" /></div> <ul class="Thumbnail"> <li> <a href="img1.jpg" target="imgBox" ><img src="img1.jpg" width="120px" /></a> </li> <li> <a href="img2.jpg" target="imgBox" ><img src="img2.jpg" width="120px" /></a> </li> <li> <a href="img3.jpg" target="imgBox" ><img src="img3.jpg" width="120px" /></a> </li> <li> <a href="img4.jpg" target="imgBox" ><img src="img4.jpg" width="120px" /></a> </li> <li> <a href="img5.jpg" target="imgBox" ><img src="img5.jpg" width="120px" /></a> </li> </ul> </body> 
·
Juan Pablo Isaza
1 answers
Answer question0
puede usar flexbox para alinear elementos horizontalmente en display: flex; y flex-wrap:wrap para pasar a la siguiente línea
* { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 62.5%; } body { min-height: 100vh; width: 100%; } img { max-width: 100%; display: block; } ul, li { list-style-type: none; } .Thumbnail { display: flex; flex-wrap: wrap; gap: 2rem; } <div class="imgBox"> <img src="" alt="" /> <ul class="Thumbnail"> <li> <a href="unsplash.jpg" target="imgBox" ><img src="https://source.unsplash.com/user/erondu/200x200" /></a> </li> <li> <a href="img2.jpg" target="imgBox" ><img src="https://source.unsplash.com/user/erondu/200x200" /></a> </li> <li> <a href="img3.jpg" target="imgBox" ><img src="https://source.unsplash.com/user/erondu/200x200" /></a> </li> <li> <a href="img4.jpg" target="imgBox" ><img src="https://source.unsplash.com/user/erondu/200x200" /></a> </li> <li> <a href="img5.jpg" target="imgBox" ><img src="https://source.unsplash.com/user/erondu/200x200" /></a> </li> </ul> </div>
·
Juan Pablo Isaza
Report
Answer question