如何在不同行中使用不同数量的 <ul> 元素来保持 <li> 中的间距均匀

问题描述 投票：0回答：2

在最后一行，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;
}
html css text-align
2个回答
1
投票

您可以使用网格而不是设置内联块和对齐。

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

（我转而使用 placeholder.com，因为加载原始图像需要时间）。

0
投票

我找到答案了：

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>

工作得很好。非常感谢你的灵感。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.