Ionic 2 Button 不会右对齐按钮

Question

我正在寻找一种使用 Ionic2 将我的按钮拉到页面右侧的方法。我有一个带有编辑和保存按钮的表单组件，我想将其拉到右边：

<div>
  <button ion-button (click)="toggleEdit()">
    <ion-icon name="create"></ion-icon>
  </button>
</div>
<ion-list>
  <ion-card-content>
    <ng-content>
    </ng-content>
  </ion-card-content>
  <div class="row center">
    <div class="col text-right">
      <button ion-button color="secondary" icon-end (click)="save()">
        <ion-icon name="save"></ion-icon>Save
      </button>
      <!--<a style="min-width: 50%;border-radius: 0px;" class="button button-dark icon-left ion-close">Cancel</a>
      <a style="min-width: 50%;border-radius: 0px;" class="button button-balanced icon-left ion-checkmark">Save</a>-->
    </div>
  </div>
</ion-list>

生成的表单如下所示：

如您所见，保存按钮没有向右拉，我尝试使用 text-right，但也许这只适用于 ionic 1？还尝试使用 icon-end 指令将其拉到右侧，但似乎不起作用我猜它只有在有另一个按钮时才有效。

任何人都可以使用正确的 Ionic 方法将保存按钮右对齐吗？

Answer 1

请看this working plunker。您可以使用 ion-item 并将 item-right 属性添加到按钮：

  <ion-card>
    <ion-item padding>
      <button default ion-button item-right>Button</button>
    </ion-item>
    <ion-card-header>
      Header
    </ion-card-header>
    <ion-card-content>
      The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
    </ion-card-content>
    <ion-item padding>
      <button default ion-button item-right>Button</button>
    </ion-item>
  </ion-card>

您可以使用 padding 属性（或 padding-left、padding-right、padding-bottom、padding-top、...）将其与其余内容。

这是我能想到的最离子的方式之一...

另一种选择是像这样使用 css：

  <ion-card>
      ...
    <div style="width: 100%; padding: 26px; text-align:right;">
      <button ion-button>Button</button>
    </div>
  </ion-card>

Ionic 2 Button 不会右对齐按钮

Ionic 2 Button will not right align button

ionic2

ionic3

angular