如何在离子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%;  
}