右端にイオンラベルを揃えることができません

Question

<ion-card> 
<ion-card-content> 
<ion-label>Total Price</ion-label><ion-label text-right>Due Date</ion-label> 
    <ion-label>xxx</ion-label><ion-label text-right>xxx</ion-label> 
</ion-card-content></ion-card> 

"Total Price"と "Due Date"を同じ行に並べることはできません。 "Total Price"を左端に、 "Due Date"を右端！私に最高のソリューションをお届けします！

Answer 1

あなたがテキストを一列に表示されることを確認するion-rowとion-colを使用して試すことができます。

<ion-card> 
<ion-card-content> 
    <ion-row> 
    <ion-col col-6> 
    <ion-label>Total Price</ion-label> 
    </ion-col> 
    <ion-col col-6> 
    <ion-label text-right>Due Date</ion-label> 
    </ion-col> 
    </ion-row> 
    <ion-row> 
    <ion-col col-6> 
    <ion-label>xxx</ion-label> 
    </ion-col> 
    <ion-col col-6> 
    <ion-label text-right>xxx</ion-label> 
    <ion-col> 
    <ion-row> 
</ion-card-content></ion-card>