タイトル、入力ボックス、イオンアイコンをイオン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%;  
}