Ionic 2按鈕不會右對齊按鈕

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> 

產生，看起來像這樣一種形式：

正如你可以看到保存按鈕不拉到右邊， 我試着用文字右鍵，但也許這隻適用於離子1？還試圖使用icon-end指令將其拉到右側，但似乎並沒有工作我猜只有當有另一個按鈕時才起作用。

任何人都可以正確的離子方式來保存按鈕的權利？

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>