如何在 Ionic 3 中并排对齐标题、输入框和 Ionic 图标

【问题标题】：How to Align Title, Input Box & Ionic Icon Side by Side in Ionic 3如何在 Ionic 3 中并排对齐标题、输入框和 Ionic 图标
【发布时间】：2017-09-26 03:28:34
【问题描述】：

到目前为止，我已经能够弄清楚如何左对齐标题和右对齐图标，但问题是我无法弄清楚中心的输入框。

预期的输出图像如下。

我的主页代码：

<ion-header>

  <ion-navbar>    
      <ion-title text-center>Page Title</ion-title>

    <ion-buttons end>
      <button ion-button icon-only>          
          <ion-icon name="search"></ion-icon>
        </button>
    </ion-buttons>

  </ion-navbar>

</ion-header>

<ion-content padding>       

</ion-content>

【问题讨论】：

标签： ionic-framework ionic3 cordova-3

【解决方案1】：

我自己修好了！

主页 HTML 文件

<ion-header>

  <ion-navbar>
    <ion-title>Title
      <ion-input type="text"></ion-input>
    </ion-title>
    <ion-buttons end>
      <button ion-button icon-only>          
          <ion-icon name="search"></ion-icon>
        </button>
    </ion-buttons>

  </ion-navbar>

</ion-header>


<ion-content padding>


</ion-content>

变量.scss 文件

$text-input-md-margin-top: 0px; 
$text-input-md-margin-bottom: 0px;
$text-input-md-margin-start: 0px;   
$text-input-md-margin-end: 0px;

Home.scss 文件

ion-input
{
    background-color: white;
    border-radius: 5px;      
    display: inline;
    color: black;
    margin-left: 0.5em;
}

.text-input-md
{
    width: 60%;    
}

【讨论】：