Question 172179 in Html Question posted in
Some basic documentation can be found here.

How to keep spacing uniform in w/ diff # of elements in diff rows?

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;
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    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).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search