Question

我正在尝试将图标重新定位在右侧的离子卡标题中。检查下面的代码示例和图片。

这是我的代码

...
<ion-card *ngFor="let account of Accounts">
<ion-card-header>      
<span item-left>{{account.title}}</span>
<span item-right><ion-icon (click)="takeAction(account.$key)" name="more"></ion-icon></span>
</ion-card-header>
<ion-card-content>
  <h5>Bank: <b>{{account.bank}}</b></h5>
  <h5>Ac name: <b>{{account.acname}}</b></h5>
  <h5>Ac name: <b>{{account.acno}}</b></h5>
</ion-card-content>

但是下图显示了我想要实现的目标

Answer 1

我终于找到了最终的解决方案。它只是添加了style="float:right;"

...
<ion-card *ngFor="let account of Accounts">
<ion-card-header>
    <span style="color:blue">{{account.title}}</span>
    <ion-icon style="float: right;" (click)="takeAction(account.$key)" name="more">
  </ion-icon>
</ion-card-header>
<ion-card-content>
  <h5>Bank: <b>{{account.bank}}</b></h5>
  <h5>Ac name: <b>{{account.acname}}</b></h5>
  <h5>Ac name: <b>{{account.acno}}</b></h5>
</ion-card-content>

注意我是如何将离子标题内容放入离子项元素

中的

Answer 2

您可以尝试将ion-row和ion-col与col-{width}一起使用。

<ion-card-header>
<ion-row justify-content-between>
  <ion-col col-11>      
    <span item-left>{{account.title}}</span>
  </ion-col>
  <ion-col col-1>
    <span item-right><ion-icon (click)="takeAction(account.$key)" name="more"></ion-icon></span>
   </ion-col>
</ion-card-header>

它们都是ion-grid的组件，其工作方式类似于bootstrap的网格布局。

Answer 3

使用div容器并将该div拉到右边。 HTML应如下所示：

<ion-card *ngFor="let account of Accounts">
<ion-card-header>      
<span item-left>{{account.title}}</span>
<span item-right> 
  <div class="pull-right">
    <ion-icon (click)="takeAction(account.$key)" name="more"></ion-icon>
  </div>
</span>
</ion-card-header>
<ion-card-content>
  <h5>Bank: <b>{{account.bank}}</b></h5>
  <h5>Ac name: <b>{{account.acname}}</b></h5>
  <h5>Ac name: <b>{{account.acno}}</b></h5>
</ion-card-content>

在CSS中添加以下内容：

.pull-right {
  float: right;
}

Answer 4

您还可以使用流行的flexbox模块。只需将以下2个CSS属性添加到父元素。

<ion-card-header>
    <div style="display: flex; justify-content: space-between;">
        <h1>Left Content</h1>
        <ion-icon name="more"></ion-icon>
    </div>
    ...
</ion-card-header>

Here，您可以找到有关flexbox的另一篇教程，其中有很好的解释和一些漂亮的，直观的示例。上面的代码片段将产生如下结果：

卡片标题图标位于右侧

4 个答案: