html - 无法在标题左侧对齐我的菜单按钮

Question

我提到了我的 button按照上面的链接对齐左右 start 和 end 键。但是我无法按照链接中的 View 设置我的按钮，这里是我的输出图像

这是我的代码

<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; and float: left;

algin: right

但无法让我的按钮向左

Answer 1

您可以使用 <ion-toolbar> 实现该布局像在 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>

编辑:

To hide both borders, the no-border attribute should be used on the ion-toolbar. To hide the top or bottom border, the no-border-top and no-border-bottom attribute should be used.