具有对齐的fontawesome图标的多行列表项目

Question

我正在为twitter引导程序中的每个列表项创建一个带有<li>标记和不同FontAwesome图标的项目列表。我试图垂直制作列表测试中心，但不能这样

<ul class="middle">
<li>
 <a href="#">
  <i class="icon-cog icon-2x"></i>
   very long multiline item one</a>
</li>
<li>
 <a href="#">
  <i class="icon-pencil icon-2x"></i>
    very long multiline item two
 </a>
</li>
</ul>

产生了

这就是我想要实现的目标

我怎样才能实现这个目标？

Answer 1

这是你在看什么 http://jsbin.com/iFaWoYa/1/

ul{list-style:none; width:100px;}
ul li {position:relative; margin:0 0 20px 0}
ul li a{position:relative; display:inline-block; padding-left:35px;}
ul li i{position:absolute; padding-right:25px; top:30%;}


<ul class="middle">
  <li>
    <i class="icon-cog icon-2x"></i> <a href="#">very long multiline item one</a>
  </li>
  <li>
    <i class="icon-pencil icon-2x"></i> <a href="#">very long multiline item two</a>
  </li>
</ul>

Answer 2

您可以将“position：relative”设置为＆lt; a＆gt; ＆lt; i＆gt;标记和“position：absolute”。然后添加“padding-left：＆lt;图标大小＆gt;”至＆lt; a＆gt;和“display：block”或“display：inline-block”因为没有“position”它就行不通。并且可能将“top：0”和“left：0”添加到图标以进行正确定位;

Answer 3

尝试在图标上使用pull-left：

<li>
 <a href="#">
  <i class="icon-cog icon-2x pull-left"></i>
   very long multiline item one</a>
</li>

演示： http://bootply.com/86079