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

【问题标题】：How to align list Items with font-awesome icon next line text?如何将列表项与字体真棒图标下一行文本对齐？
【发布时间】：2023-03-31 16:46:01
【问题描述】：

一幅画描绘一千个字。下一行的文字需要和上面一样对齐。

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 图标现在偏离了中心。

【问题讨论】：

只需在 panther 的回答中添加 margin-top:2px; 到 em
聚会有点晚了，但我想有人不得不提到字体真棒的内置功能stackoverflow.com/a/35357616/759452

标签： html css

【解决方案1】：

你可以尝试使用font awesome's built-in solution for lists:

使用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>

【讨论】：

看起来你在列表项中遗漏了fa-li。但我很欣赏你的回答。在找到这个之前一直在转圈。（我仍然需要对 .fa-li css 进行一些调整，但这个答案让我走上了正确的道路！）

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

为什么不这样做：

将position 与relative 的property value 一起应用到li 以避免重叠
插入带有:before 选择器的正方形，并添加带有property value 的property value 的position 到它的CSS 块中。

这样您就可以根据需要定位它。在定位时，您可以使用 top、bottom、left 和 right 属性。

HTML

<ul>
<li>
<p>Some important text are to be place here. 
It may or may not longer than the text we have here. You never know.
    </p>
</li>
</ul>

CSS

 ul{
      list-style-type: none;
   }

   li  {
       position: relative; /* Will help curtail overlap */
      padding-left: 20px; /* Reserves a space for the square dot */
    }

    li:before {   
       content: '\f0c8';
       position: absolute;
       left: 0; /* Places the square dot at the space created by the LI padding */
       font-family: fontAwesome;
     }

See working example here

【讨论】：

【解决方案4】：

我想你会这样期待

小提琴

http://jsfiddle.net/myYUh/88/

我添加了一些在 jsfiddle 上找到的示例，我做了一点工作。它可能会帮助你。

CSS

.icons-ul{  
    width:100px;
}

.icons-ul>li {
position: relative;
}

icons-ul {
margin-left: 2.142857142857143em;
list-style-type: none;
}

ul, ol {
margin-top: 0;
margin-bottom: 10px;
}

.icons-ul .icon-li {
position: absolute;
left: -2.142857142857143em;
width: 2.142857142857143em;
text-align: center;
line-height: inherit;
}

[class^="icon-"], [class*=" icon-"] {
display: inline;
width: auto;
height: auto;
line-height: normal;
vertical-align: baseline;
background-image: none;
background-position: 0% 0%;
background-repeat: repeat;
margin-top: 0;
}

HTML

<ul class="icons-ul">
  <li><i class="icon-li icon-ok"></i>Bulleted lists (like this one)</li>
  <li><i class="icon-li icon-ok"></i>Buttons</li>
  <li><i class="icon-li icon-ok"></i>Button groups</li>
  <li><i class="icon-li icon-ok"></i>Navigation</li>
  <li><i class="icon-li icon-ok"></i>Prepended form inputs</li>
  <li><i class="icon-li icon-ok"></i>&hellip;and many more with custom CSS</li>
</ul>

【讨论】：