Ionic 2按钮不会右对齐按钮

时间:2017-06-25 16:45:34

标签: angular ionic2 ionic3

我正在寻找一种方法,使用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>

生成一个如下所示的表单:enter image description here

如您所见,保存按钮未向右拉, 我尝试使用正确的文本,但也许只适用于离子1?还尝试使用icon-end指令将其拉到右边,但这似乎并不起作用我想它只有在有另一个按钮时才有效。

任何人都可以使用正确的离音方式将保存按钮对齐吗?

1 个答案:

答案 0 :(得分:9)

请查看 this working plunker 。您可以使用highest = 0 lowest = 0 results = [] result_f = open("results.txt") for each_line in result_f: print(each_line) results += each_line result_f.close() results_as_float = map(float, results) highest = max(results_as_float) print("Highest score is : " , highest) 并将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> 属性(或paddingpadding-leftpadding-rightpadding-bottom,...)将其与其他属性对齐内容。

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

另一个选择就是像这样使用css:

padding-top