引導DL列表不顯示在fontawesome圖標的側

Question

我有這樣在一起的顯示圖標和dl列表：

.phone { 
    font-size: 10px; 
    background: #333 none repeat scroll 0% 0%; 
    color: #262626; 
    border-radius: 3px; 
    padding: 30px 23px; 
} 
.dl-horizontal dt { 
    line-height: 15px; 
    margin-top: 3px; 
    padding-left: 10px; 
} 
.dl-horizontal { 
    color: #000; 
    font-size: 11px; 
} 
.col-md-4 i { 
    margin: 0px 0px 0px 10px !important; 
} 
.col-md-12 i { 
    margin: 0px 12px 0px 15px; 
} 

HTML：

<div class="ef-widget-inner"> 
    <div class="col-md-12 col-lg-12 nopadding"> <i class="fa fa-phone phone"></i> 

     <dl class="dl-horizontal"> <dt>Title 1.................</dt> 

      <dd><a href="contact.php"><span><i>28311</i></span></a> 
      </dd> <dt>Title 2</dt> 

      <dd><a href="contact.php"><span><i>28312</i></span></a> 
      </dd> <dt>Title 3</dt> 

      <dd><a href="contact.php"><span><i>28314</i></span></a> 
      </dd> 
     </dl> 
    </div> 
</div> 

，但dl列表顯示在圖標的底部。我怎麼能顯示dl列表在圖標的一側？！

演示HERE

Answer 1

你需要給.dl-horizontal CSS屬性display: inline-block，否則將顯示爲block這會佔用寬度的100％。

.phone { 
 
    font-size: 10px; 
 
    background: #333 none repeat scroll 0% 0%; 
 
    color: #262626; 
 
    border-radius: 3px; 
 
    padding: 30px 23px; 
 
} 
 
.dl-horizontal dt { 
 
    line-height: 15px; 
 
    margin-top: 3px; 
 
    padding-left: 10px; 
 
} 
 
.dl-horizontal { 
 
    color: #000; 
 
    font-size: 11px; 
 
    display: inline-block; 
 
} 
 
.col-md-4 i { 
 
    margin: 0px 0px 0px 10px !important; 
 
} 
 
.col-md-12 i { 
 
    margin: 0px 12px 0px 15px; 
 
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="ef-widget-inner"> 
 
    <div class="col-md-12 col-lg-12 nopadding"> <i class="fa fa-phone phone"></i> 
 
    <dl class="dl-horizontal"> <dt>Title 1.................</dt> 
 
     <dd><a href="contact.php"><span><i>28311</i></span></a> 
 
     </dd> <dt>Title 2</dt> 
 

 
     <dd><a href="contact.php"><span><i>28312</i></span></a> 
 
     </dd> <dt>Title 3</dt> 
 

 
     <dd><a href="contact.php"><span><i>28314</i></span></a> 
 
     </dd> 
 
    </dl> 
 
    </div> 
 
</div>