-3

参照: 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
4

3 に答える 3

1

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

于 2013-02-03T15:21:16.220 に答える
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>

フィドルを見る

于 2013-02-03T15:19:46.193 に答える
0 
<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>

コメントの周りにスパンを挿入すると、問題が解決するようです。

于 2013-02-03T17:33:57.903 に答える