如何將圖標和標籤放在同一行中？

Question

圖標和喜字不能放入同一行

<link href="http://code.ionicframework.com/1.3.1/css/ionic.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="col"> 
 
    <h5 class="title">hi</h5> 
 
    </div> 
 
    <i class="icon ion-ios-heart"></i> 
 
</div>

謝謝！

Answer 1

h5將顯示爲一個塊，因此它有自己的行。

雖然應該使用h5標籤內的圖標。

---

Answer 2

方法1 - CSS

<div class="row"> 
    <div class="col"> 
     <span class="item"> 
      <h5 style="display:inline" class="title">hi</h5> 
      <i class="icon ion-ios-heart"></i> 
     </span> 
    </div> 
</div> 

方法2 - 在同一列

<div class="row"> 
    <div class="col"> 
     <h5 class="title">hi<i class="icon ion-ios-heart"></i></h5> 
    </div> 
</div> 

方法3 - 在同一行兩列

<div class="row"> 
    <div class="col"> 
     <h5 class="title">hi</h5> 
    </div> 
    <div class="col"> 
     <i class="icon ion-ios-heart"></i> 
    </div> 
</div>