如何将列表项与字体真棒图标下一行文本对齐？

Question

一幅画描绘一千个单词。下一行的文本需要与上面的边距相同。

HTML:

 <ul>
<li>
<p><em class="fa fa-square"></em><span>Name and surnafdddddddddddddds sdgfh dh hdfh df hdsh dfh dsfh sdfhdsfh sdf hsdfhdsfhme</span></p>
</li>
</ul>

CSS：

 ul{
    display: table;
    a{
        padding-left: 10px;
    }
    span{
        padding-left: 10px;
    }
}

更新：

@panther 更新后：

这是可以接受的，但是 fontawesome 图标现在偏离了中心。

原文由 tread 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以尝试使用 font awesome 的内置列表解决方案：

使用 fa-ul 和 fa-li 轻松替换无序列表中的默认项目符号。

---

在您的情况下，代码将更改为如下所示：

 <ul class="fa-ul">
  <li><i class="fa fa-square"></i><span>Name and surnafdddddddddddddds sdgfh dh hdfh df hdsh dfh dsfh sdfhdsfh sdf hsdfhdsfhme</li>
</ul>

原文由 Adrien Be 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可能正在寻找圣。像这样。

 em {float: left;}
a, span {margin: 0 0 0 20px; display: block;}

原文由 pavel 发布，翻译遵循 CC BY-SA 3.0 许可协议