如何将图标和标签放在同一行中？

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>