我想证明 3 张图片的合理性，我以前从未这样做过，所以我不知道该怎么做。
现在我用谷歌搜索了一下，发现属性“justify”，但我看到它只适用于文本(如果我错了请纠正我。)
但我尝试了以下方法。
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;
}
但这行不通(当然)。
有没有人知道如何做到这一点？
要使 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 伪元素，以便使该行元素作为一个整体而不是最后一个在某些合理的内容上工作。