Question

我想证明3张图片是合理的，我之前从未这样做过，所以我不知道怎么做。现在我用谷歌搜索了一下，找到了属性＆＃34;对齐＆＃34;，但我看到它只适用于文本（如果我错了，请纠正我。）

但我尝试了以下内容。

HTML

        <ul>
            <li><img class="uspIconOntwerp" src="images/ontwerp-icon.png" /><div class="uspText">Ontwerp</div></li>
            <li><img class="uspIconRealisatie" src="images/realisatie-icon.png" /><div class="uspText">Realisatie</div></li>
            <li><img class="uspIconPrijs" src="images/prijs-icon.png" /><div class="uspText">Betaalbare prijs</div></li>
        </ul>

我的css

    ul
{
        text-align: justify;
}

但这不起作用（当然）。

有没有人知道如何做到这一点？

Answer 1

要使justify属性与文本对齐方式一样，您需要制作li项inline-block元素。试试这个：

ul {
  text-align: justify;
}
ul > li {
  display: inline-block;
}
ul:after {
  content: '';
  display: inline-block;
  width: 100%;
}

* {
  margin: 0;
  padding: 0
}
ul {
  background: red;
  padding: 40px;
  box-sizing: border-box;
  text-align: justify;
}
ul > li {
  display: inline-block;
}
ul:after {
  content: '';
  display: inline-block;
  width: 100%;
}

<ul id="Grid">
  <li>
    <img class="uspIconOntwerp" src="images/ontwerp-icon.png" />
    <div class="uspText">Ontwerp</div>
  </li>
  <li>
    <img class="uspIconRealisatie" src="images/realisatie-icon.png" />
    <div class="uspText">Realisatie</div>
  </li>
  <li>
    <img class="uspIconPrijs" src="images/prijs-icon.png" />
    <div class="uspText">Betaalbare prijs</div>
  </li>
</ul>

请注意，您需要after伪元素才能使该项项目作为整个项目工作，而不是某些合理内容中的最后一项。

证明图像CSS

1 个答案: