Twitter Bootstrap：如何在<ol> </ol>上显示图标

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>

假设我希望图标信封显示在第一个<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>

Fiddle

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

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

请参阅fiddle

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>

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