如何將離子標籤對齊？

Question

我正在研究Ionic v2，並且正面臨着將離子標籤值對齊的問題。以下是代碼片段：

HTML代碼：

<ion-content padding class="home"> 
    <ion-list> 
     <ion-item class="clearme"> 
     <ion-label>Employee Name:</ion-label> 
     <ion-label class="alignme">Gaurav</ion-label> 
     </ion-item> 
    </ion-list> 

CSS：

.home { 
    background-color:red; 
} 

.alignme{ 

    float:right !important; 
} 
.clearme{ 

    clear: both !important; 
} 

添加這些類文本沒有得到對齊到右後。

Answer 1

只需使用文本對齊而不是浮動。

.alignme{ 
    text-align: right; 
} 

順便說一句，你應該使用離子標籤只與形式 - 離子輸入，離子複選框等

Answer 2

您還可以使用text-right屬性指令像下面。

<ion-label text-right>Gaurav</ion-label> 

有關屬性指令詳細信息，請參閱here

Answer 3

如果仍不成功嘗試這種

//html 
<ion-item> 
    <ion-input type="text" placeholder="Username"></ion-input> 
    <ion-label class="alignme"> 
     <ion-icon name="logo-playstation"></ion-icon>      
    </ion-label> 
    </ion-item> 

//css 
    .alignme{ 

     position:absolute; 
     right:0 

    }