如何将列表项与font-awesome图标下一行文本对齐？

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

Answer 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>

Answer 2

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

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

Answer 3

我认为你期待这样

小提琴

<强> 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>

Answer 4

为什么不这样做：

1. 将position property value relative li应用于:before以避免重叠

2. 使用position选择器插入方块，并添加property value Absolute CSS的{​​{1}}块。

这样你可以根据需要定位它。您可以在定位时使用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