css - Twitter Bootstrap：如何在上面显示图标

Question

见：http: //jsfiddle.net/D4eu9/1/

<p><i class="icon-envelope"></i> foo@foobar.com</p>
<ol>
    <li>one@foobar.com</li>
    <li>two@foobar.com</li>
    <li>three@foobar.com</li>    
<ol>

假设我希望 icon-envelope 出现在第一个<li>. 我希望它出现并与显示的第一个图标信封对齐。我该怎么做呢？

*更新 1：它应该是什么样子 *

[icon] foo@foobar.com

[icon] one@foobar.com
       two@foobar.com
       three@foobar.com

Answer 1

试试这个：

<li><i class="icon-envelope"></i>one@foobar.com</li>

小提琴

更新： 要将图标移动到顶层，您需要为图标和列表项添加边距：

<li>
    <i style="margin-left:-25px" class="icon-envelope"></i>
    <span style="margin-left:25px;">one@foobar.com</span>
</li>

见小提琴

Answer 2

使用<i>里面的标签LI

<i class="icon-envelope"></i> one@foobar.com

所以你的完整代码将是这样的：

<p><i class="icon-envelope"></i> foo@foobar.com</p>
<ol>
    <li><i class="icon-envelope"></i> one@foobar.com</li>
    <li><i class="icon-envelope"></i> two@foobar.com</li>
    <li><i class="icon-envelope"></i> three@foobar.com</li>    
<ol>

小提琴：http: //jsfiddle.net/praveenscience/ht7Es/

---

我们通常这样做，使用padding：

<p><i class="icon-envelope"></i> foo@foobar.com</p>
<ol>
    <li><i class="icon-envelope"></i> one@foobar.com</li>
    <li class="no-icon">two@foobar.com</li>
    <li class="no-icon">three@foobar.com</li>    
<ol>

小提琴：http: //jsfiddle.net/praveenscience/ht7Es/2/

Answer 3

<ol>
  <li class="list"><span><i class="icon-envelope"></i> foo@foobar.co</span></li>
  <li class="list"><span><i class="icon-envelope"></i> foo@foobar.co</span></li>
  <li class="list"><span><i class="icon-envelope"></i> foo@foobar.co</span></li>
<ol>

在评论周围插入一个跨度似乎可以解决我的问题。