How to keep spacing uniform in <ul> with different numbers of <li> elements in different rows

Question

How to keep spacing uniform in <ul> with different numbers of <li> elements in different rows

42 Views Asked by lapin At 18 May 2023 at 23:56

At the last row, the spaces among li elements are not same as the previous rows. I want all of them to be same. I do not want to use text-align: center, because it ruins the alignment between the li elements at the last row and the li elements at the upper rows. My code is:

    <body>
        <ul>
            <li><img src="http://placehold.it/120x90" alt="stack"></li>
            <li><img src="http://placehold.it/120x90" alt="stack"></li>
            <li><img src="http://placehold.it/120x90" alt="stack"></li>
            <li><img src="http://placehold.it/120x90" alt="stack"></li>
            <li><img src="http://placehold.it/120x90" alt="stack"></li>
            <li><img src="http://placehold.it/120x90" alt="stack"></li>
            <li><img src="http://placehold.it/120x90" alt="stack"></li>
            <li><img src="http://placehold.it/120x90" alt="stack"></li>
            <li><img src="http://placehold.it/120x90" alt="stack"></li>
            <li><img src="http://placehold.it/120x90" alt="stack"></li>
            <li><img src="http://placehold.it/120x90" alt="stack"></li>
        </ul>
    </body>

ul {
    list-style-type: none;
    padding: 0;
    text-align: justify;
}
li {
    margin-left: 6px;
    margin-right: 6px;
    margin-bottom: 10px;
    direction: ltr;
    width: 300px;
    display: inline-block;
    text-align: center;
}

Original Q&A

There are 2 best solutions below

**A Haworth** · Answer 1 · 2023-05-19T01:17:02.153000

You could use grid instead of setting inline-blocks and justifying.

<style>
  ul {
    list-style-type: none;
    padding: 0;
    rtext-align: justify;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    width: 100vw;
  }
  
  li {
    margin-left: 6px;
    margin-right: 6px;
    margin-bottom: 10px;
    direction: ltr;
    width: 300px;
    text-align: center;
  }
</style>

<body>
  <ul>
    <li><img src="http://via.placeholder.com/120x90" alt="stack"></li>
    <li><img src="http://via.placeholder.com/120x90" alt="stack"></li>
    <li><img src="http://via.placeholder.com/120x90" alt="stack"></li>
    <li><img src="http://via.placeholder.com/120x90" alt="stack"></li>
    <li><img src="http://via.placeholder.com/120x90" alt="stack"></li>
    <li><img src="http://via.placeholder.com/120x90" alt="stack"></li>
    <li><img src="http://via.placeholder.com/120x90" alt="stack"></li>
    <li><img src="http://via.placeholder.com/120x90" alt="stack"></li>
    <li><img src="http://via.placeholder.com/120x90" alt="stack"></li>
    <li><img src="http://via.placeholder.com/120x90" alt="stack"></li>
    <li><img src="http://via.placeholder.com/120x90" alt="stack"></li>
  </ul>
</body>

(I switched to using placeholder.com as the original image took time to load).

**lapin** · Answer 2 · 2023-05-19T16:39:46.617000

I've found the answer:

ul {
  list-style-type: none;
  padding: 0;
    display: grid;
  grid-template-columns: auto auto auto auto;
  justify-content: space-evenly;
}
  
li {
  direction: ltr;
  width: 320px;
  text-align: center;
}

<!DOCTYPE html>
<html lang ="en">
    <head>
        <title>question</title>
        <link rel="stylesheet" href="question.css">
    </head>
    <body>
        <ul>
            <li><img src="http://via.placeholder.com/120x90" alt="stack"></li>
            <li><img src="http://via.placeholder.com/120x90" alt="stack"></li>
            <li><img src="http://via.placeholder.com/120x90" alt="stack"></li>
            <li><img src="http://via.placeholder.com/120x90" alt="stack"></li>
            <li><img src="http://via.placeholder.com/120x90" alt="stack"></li>
            <li><img src="http://via.placeholder.com/120x90" alt="stack"></li>
            <li><img src="http://via.placeholder.com/120x90" alt="stack"></li>
            <li><img src="http://via.placeholder.com/120x90" alt="stack"></li>
            <li><img src="http://via.placeholder.com/120x90" alt="stack"></li>
            <li><img src="http://via.placeholder.com/120x90" alt="stack"></li>
            <li><img src="http://via.placeholder.com/120x90" alt="stack"></li>
        </ul>
    </body>
</html>

Worked perfectly fine. Thanks a lot for inspiration.

How to keep spacing uniform in <ul> with different numbers of <li> elements in different rows

There are 2 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in TEXT-ALIGN

Trending Questions

Popular # Hahtags

Popular Questions