Ionic framework 对齐标题中的图标

我试图有一个离子头，其中一个图标在左边，另一个在右边。我的代码如下所示

<ion-header>
    <ion-navbar>
      <ion-buttons icon-start>
        <button ion-button icon-only>
          <ion-icon name="contact"></ion-icon>
        </button>

      </ion-buttons>
      <ion-title text-center>about</ion-title>
      <ion-buttons  icon-end>
        <button ion-button icon-only>
          <ion-icon name="search"></ion-icon>
        </button>
      </ion-buttons>
    </ion-navbar>
  </ion-header>

关于

---

但是我看到它出现在3个不同的行中。

好的，您需要删除第一个

，只保留

，并在

的第二个标记上更改

图标结束

到

结束

---

它应该会起作用

欢迎来到StackOverflow

由于爱奥尼亚基于应用程序运行的当前平台应用android/ios标准，因此您需要了解以下属性的含义：

开始

、

结束

、

左

和

右

关于结束/开始/左/右 在ion按钮中使用

start

属性并不意味着它将被放置在左侧，因为

start

和

end

遵循平台的UI模式

因此，

将位于ios的左侧，并成为android右侧的第一个按钮

对于ios，

将位于右侧，对于android，最后一个按钮将位于右侧

因此，无论是

开始

还是

结束

，该按钮都将放置在Android的右侧

如果要在两个平台的左侧或右侧放置按钮，应使用

left

或

right

，因为提供这些属性是为了克服这一点。通过几个例子更容易看到，所以请看下面的例子

---

示例1：使用

start

和

end

结果是：

iOS

Android

<ion-header>
  <ion-navbar>
    <ion-buttons start> <!-- Here we use start -->
        <button ion-button icon-only>
          <ion-icon name="contact"></ion-icon>
        </button>
    </ion-buttons>
    <ion-title>Home</ion-title>
    <ion-buttons end> <!-- Here we use end -->
        <button ion-button icon-only>
          <ion-icon name="search"></ion-icon>
        </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-header>
  <ion-navbar>
    <ion-buttons left> <!-- Here we use left -->
        <button ion-button icon-only>
          <ion-icon name="contact"></ion-icon>
        </button>
    </ion-buttons>
    <ion-title>Home</ion-title>
    <ion-buttons right> <!-- Here we use right -->
        <button ion-button icon-only>
          <ion-icon name="search"></ion-icon>
        </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>