Css 离子2&；带左和右的离子项目；右文本

在ionic 2应用程序中，我只想创建一个可点击的左右文本按钮。它是给支票查看器的（日期在左边，金额在右边）

这看起来很简单，表面上看也很简单。如前所述，您可以使用一些CSS向左/向右推送文本。我发现它在大多数视图（如手机）下都能正常工作，但在iPad上，该项目显示不好

下面是我的一些代码示例以及由此产生的iPad视觉效果。有没有干净的方法可以做到这一点

              <button ion-item *ngFor="let settlement of recentSettlements | slice:0:3" (click)="showSettlement(settlement)">
                <span class="floatLeft">{{settlement.checkDate.slice(0,10)}}</span>
                <span class="floatRight" [ngClass]="(settlement.checkTotal >= 0) ? 'positiveAmount' : 'negativeAmount'">${{settlement.checkTotal}}</span>            
              </button>

{{结算.checkDate.slice（0,10）}
${{结算.支票总额}

或

{{结算.checkDate.slice（0,10）}
${{结算.支票总额}

---

您不需要触摸css，您可以通过爱奥尼亚自己的指令来完成：

<ion-list>
  <ion-item *ngFor="let n of whatever" (click)="doSmt(n)">
    <div item-left>Left</div>
    {{n.someProperty}}
    <div item-right>Right</div>
  </ion-item>

</ion-list>

左边
{{n.someProperty}
赖特

---

从文档中：

我确实使用了

项目左

和

项目右

。我必须使用

标记，而不是像上面建议的那样使用

，以便保持一致

我的另一个问题就是在爱奥尼亚的响应网格中为内容留出足够的空间。我的想法是，如果一张

离子卡

能很好地安装在手机上，我就可以很容易地在平板电脑上安装2-3个。事实证明，情况并非总是如此，这取决于内容

因此，如果在不同的形状因素上出现问题，网格设置可能需要调整。我缺乏一些常识

<ion-list>
  <ion-item *ngFor="let n of whatever" (click)="doSmt(n)">
    <div item-left>Left</div>
    {{n.someProperty}}
    <div item-right>Right</div>
  </ion-item>

</ion-list>