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

Current Code

javascripthtmlcss


Solution 1:[1]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 UPinar

Related Questions