html - 如何将图标与其标题或文字描述对齐？

Question

我的图标和文本在不同的列表标签中。图标未与其标题对齐。它们被写成两个无序列表。我现在唯一的解决方案是将列表合并到一个 ul，但我希望有更好的方法来做到这一点。非常感谢任何帮助。

<ul>
    <li><i class="fa fa-cog"></i></li>
    <li><i class="fa fa-home"></i></li>
    <li><i class="fa fa-user"></i></li>
    <li><i class="fa fa-cart"></i></li>
</ul>
<ul>
    <li>Settings</li>
    <li>Home</li>
    <li>Account</li>
    <li>Cart</li>
</ul>

Answer 1

方法 1:如果您不希望图标和文本位于相同的 ul 中，请尝试为 li 定义固定宽度。

li {
    display: inline-block;
    margin: 0 40px;
    text-align: center;
    width: 100px;
}

方法二:如果您可以集成 2 个列表，那是更好的解决方案:

<ul>
    <li><i class="fa fa-cog"></i>Settings</li>
    <li><i class="fa fa-home"></i>Home</li>
    <li><i class="fa fa-user"></i>Account</li>
    <li><i class="fa fa-cart"></i>Cart</li>
</ul>

CSS:

ul li {
    display: inline-block;
    margin: 0 30px;
    text-align: center;
}
ul li i {
    display: block;
    /* add margins here to adjust icons */
}