0
152
Viewshow to move images inside a list tag into the next line?
so I have used a img tag inside a list tag to show 5 images which will be shown inline and I want to add more images below the current images in the same order when I add more images it all shows in the same line how can I move to the next line ?
<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
you can use flexbox to align items horizontally in row display: flex; and flex-wrap:wrap to get in to the next line
* {
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