[英]Ionic 2 Button will not right align button
我正在寻找一种使用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指令将其向右拉,但这似乎不起作用,我猜它只有在有另一个按钮时才起作用。
任何人都可以通过正确的离子方式将保存按钮向右对齐吗?
请看看这个工作的矮人 。 您可以使用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.