如何在ionic2中添加图标按钮标签并在单行中一起输入？

Question

在闲置代码中，我尝试将 3 个元素一起添加，但失败并且按钮未显示在输出中

<ion-content>
  <ion-item>
    <ion-label fixed>Origin</ion-label>
    <ion-input type="text" value=""></ion-input>
    <ion-buttons end>
      <button ion-button icon-only>
        <ion-icon name="locate"></ion-icon>
      </button>
    </ion-buttons>
  </ion-item>

  <ion-item>
    <ion-label fixed>Target</ion-label>
    <ion-input type="text" value=""></ion-input>
    <ion-buttons end>
      <button ion-button icon-only>
        <ion-icon name="locate"></ion-icon>
      </button>
    </ion-buttons>
  </ion-item>
<button ion-button full>Start</button>
</ion-content>

它单独显示每个项目或一起显示带有标签的文本，但按钮未显示在文本框的末尾。

Answer 1

这样做的一种方法是使用 ion-row,ion-col 以您需要的格式进行排列。检查here 示例：

 <ion-row>
    <ion-col width-80>
       <ion-item> <ion-label fixed>Origin</ion-label> <ion-input type="text" value=""></ion-input> </ion-item>
    </ion-col>
    <ion-col> 
    <button ion-button icon-only> <ion-icon name="locate"></ion-icon> </button>
 </ion-col>  
</ion-row>