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

Question

图标和单词hi不能放在同一行

<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

方法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>

Answer 2

h5将显示为一个块，因此它有自己的行。

应该使用h5标签内的图标。