html - Ionic 2 导航栏标题和左右按钮问题

Question

我正在使用 ionic 2。我正在将导航栏设置为 title as center 。和一个带有一些onclick功能的左右按钮。我得到了一些将标题作为中心的解决方案。但是左右按钮的方式不正确。就像一个一个垂直的。但我需要横向。我尝试了很多但无法得到它？

这是我的代码:

我的 scss :

ion-header {
  .button-md {
    box-shadow: none;
  }

  .toolbar-title {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 500;
  }
}

我的 html :

<ion-header>

  <ion-toolbar>



    <ion-buttons >
    <button ion-button class="loginnavbtn" (click)="goback()" left>Save</button>

    </ion-buttons>

    <ion-title>
      LOGIN
    </ion-title>

    <ion-buttons >
    <button ion-button class="loginnavbtn" (click)="goback()" right>Save</button>

    </ion-buttons>


  </ion-toolbar>
</ion-header>
<ion-content>


   </ion-content> 

我需要的输出:

**cancel     LOGIN       Save**

但是我得到的输出是:

我应用了一些 css 使我的按钮向右移动，但它增加了整个导航栏的高度。

Answer 1

我想你只需要添加 ion-buttons start 和 end

<ion-buttons start>
  <button ion-button class="loginnavbtn" (click)="goback()" left>Save</button>
</ion-buttons>

<ion-title>
  LOGIN
</ion-title>

<ion-buttons end>
  <button ion-button class="loginnavbtn" (click)="goback()" right>Save</button>
</ion-buttons>