欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

如何在& ltul & gt不同數量的& lt李& gt不同行中的元素

CSS
江奕云2年前8瀏覽0評論

在最后一行，li元素之間的間距與前面的行不同。我希望他們都一樣。我不想使用text-align: center，因為它破壞了最后一行的li元素和上面幾行的li元素之間的對齊。我的代碼是:

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

你可以使用網格來代替設置內嵌塊和調整。

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

我找到了答案:

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>