Question

在带有离子服务的浏览器中，它显示得很好。但是在android kitkat设备4.4.4中，导航栏右侧（末端）上的按钮是垂直显示的，而不是水平显示的。

<ion-navbar>
  <ion-title>AppTitle</ion-title>
  <ion-buttons end>
    <button ion-button icon-only>
      <ion-icon name="search"></ion-icon>
    </button>
    <button ion-button icon-only>
      <ion-icon name="more"></ion-icon>
    </button>
</ion-buttons>

Answer 1

由于我不知道的原因，标签分配的宽度小于两个按钮的尺寸，因此它使它们垂直对齐。我发现的解决方案是分配一个大于两个按钮宽度的固定宽度。示例：（将样式放在类中是一种最佳做法）

完整代码：

<ion-navbar>
  <ion-title>AppTitle</ion-title>
  <ion-buttons end style="width: 80px! Important;">
    <button ion-button icon-only>
      <ion-icon name="search"></ion-icon>
    </button>
    <button ion-button icon-only>
      <ion-icon name="more"></ion-icon>
    </button>
  </ion-buttons>
</ion-navbar>

Answer 2

这是一个示例标题，它将左右两个按钮正确放置。

<ion-header>
    <ion-navbar>
      <button ion-button menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
      <ion-title>Page Title</ion-title>
      <ion-buttons end>
        <button ion-button icon-only>
          <ion-icon ios="ios-cog" md="md-cog"></ion-icon>
        </button>
      </ion-buttons>
    </ion-navbar>
</ion-header>

离子导航栏<ion-buttons end =“”>在android kitkat 4.4.4中垂直显示图标

2 个答案: