标题项目的iOS设备浮动右问题答案

【问题标题】：iOS device float-right issue with header item标题项目的iOS设备浮动右问题
【发布时间】：2017-12-14 04:12:55
【问题描述】：

我对带有标头的iOS 设备有疑问。当我在HTML 下方使用时，它在 Android 设备上运行良好。

.html

<ion-header>
  <ion-navbar color="primary">
    <ion-title>
      <span>Budget</span>
      <ion-icon name="ios-add-outline" float-right></ion-icon>
    </ion-title>
  </ion-navbar>
</ion-header>

Android UI：没问题。

但在 iOS 设备上，它不起作用。标题的中心对齐很好。但问题在于+ 符号。我需要像安卓设备一样展示它。换句话说float-right。你能告诉我如何实现吗？

iOS 设备：

【问题讨论】：

这是因为ios和md模式有不同的风格。您可以通过检查元素来找到它。但有一种更简单的方法，即通过将mode="md" 添加到ion-navbar 和ion-title，在所有设备中显示md 模式
没有。它不起作用，因为我的客户需要在 2 个平台上使用不同的样式。 @Duannx 还有其他方法吗？
你试过这样的布局吗？：<ion-title>...</ion-title> <ion-buttons end>  </ion-buttons>

标签： android ios css angular ionic3

【解决方案1】：

<ion-header>
  <ion-navbar color="primary">
    <ion-title>
      Budget
    </ion-title>
    <ion-buttons end>
        <button ion-button icon-only clear>
           <ion-icon name="ios-add-outline"></ion-icon>
        </button>
    </ionbuttons>
  </ion-navbar>
</ion-header>

【讨论】：