一个css的实现?

Question

网页 https://www.stgeorges.edu.ar/quilmes/our-values/

这种布局效果是怎么实现的?

我原先的代码是这样写的

<ul class="list-unstyled mb-3">
    <li class="mb-3">
        <i class="fa fa-check fa-lg mr-3 text-primary"></i>
        <span class="lh-4">Uphold honesty, integrity and truth.</span>
    </li>
    <li class="mb-3">
        <i class="fa fa-check fa-lg mr-3 text-primary"></i>
        <span class="lh-4">Demonstrate fortitude in terms of energy, initiative, courage and responsibility.</span>
    </li>
    <li class="mb-3">
        <i class="fa fa-check fa-lg mr-3 text-primary"></i>
        <span class="lh-4">Exercise good manners and respect towards people, rules, institutions, and the environment.</span>
    </li>
    <li class="mb-3">
        <i class="fa fa-check fa-lg mr-3 text-primary"></i>
        <span class="lh-4">Commitment and loyalty to the College, its people and society at large.</span>
    </li>

    <li class="mb-3">
        <i class="fa fa-check fa-lg mr-3 text-primary"></i>
        <span class="lh-4">Actively develop the concept of duty, caring and leadership through example.</span>
    </li>
    <li class="mb-3">
        <i class="fa fa-check fa-lg mr-3 text-primary"></i>
        <span class="lh-4">Apply perseverance and fair play in behaviour, work and play.</span>
    </li>
</ul>

效果不是很符合

然后我试了一下给每个li加了flex

<li class="mb-3 d-flex align-items-start">

图标为什么会有点往上偏移了?

Answer 1

i.fa.fa-check 这个图标元素增加一个 margin-top 属性就好了。
或者给 i.fa.fa-check 这个图标元素设置一个和后面的文本行高一样的高度也行。

Answer 2

给 i 的外层加一个父标签

<li class="d-flex mb-3">
    <span><i class="fa fa-check fa-lg mr-3 text-primary"></i></span>
    <span class="lh-4">Uphold honesty, integrity and truth.</span>
</li>

不明白是什么原理, 但确实解决了问题. 下图列表项 2 和 3 是没加和加了的对比