私のメニューボタンをヘッダーの左側に揃えることができません

Question

私はstartとendキーを上記のように左右に揃えるために私のbuttonを参照しました。しかし、私は私の出力画像が

であるここに私のコードは私がこれまで試してみました何

<ion-header class="home"> 
    <ion-navbar primary padding> 
    <ion-row> 
     <ion-buttons start> 
     <button menuToggle > 
     <ion-icon name="menu"></ion-icon> 

     </button> 
     </ion-buttons> 

     <ion-title>Auto Parts</ion-title> 

     <ion-buttons end> 
      <button> <ion-icon name="document"></ion-icon></button>&nbsp;&nbsp;&nbsp; 
      <button><ion-icon name="heart"></ion-icon></button>&nbsp;&nbsp;&nbsp; 
      <button><ion-icon name="cart"></ion-icon></button> 
     </ion-buttons> 
    </ion-row> 

    <ion-row> 
     <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar> 
    </ion-row> 

    </ion-navbar> 

</ion-header> 

あり、ここで、リンクのビューごとに私のボタンを設定することはできませんよと、次のとおりです。

float：right;フロート：左。

アルギン：右

なく

Answer 1

を左に私のボタンを取得することができあなたがthis plunker

<ion-header class="home"> 
    <ion-navbar primary padding> 
     <button menuToggle> 
     <ion-icon name="menu"></ion-icon> 
     </button> 
     <ion-title>Auto Parts</ion-title> 
     <ion-buttons end> 
      <button> <ion-icon name="document"></ion-icon></button>&nbsp;&nbsp;&nbsp; 
      <button><ion-icon name="heart"></ion-icon></button>&nbsp;&nbsp;&nbsp; 
      <button><ion-icon name="cart"></ion-icon></button> 
     </ion-buttons> 
    </ion-navbar> 
    <ion-toolbar primary> 
     <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar> 
    </ion-toolbar> 
</ion-header> 

で見ることができるように検索バーを配置する <ion-toolbar>を使用して、そのレイアウトを実現することができます

編集：

両方の罫線を非表示にするには、 イオンツールバーでno-border属性を使用する必要があります。上部または下部の境界線を非表示にするには、no-border-topおよび no-border-bottom属性を使用する必要があります。