如何对齐标题，输入框和＆amp;离子图标并排在离子3

Question

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

预期输出图像如下所示。

我的主页代码：

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

Answer 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>

Variable.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%;    
}