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

您也可以使用text-right属性指令，如下所示。

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

有关属性指令的详细信息，请参阅here

Answer 2

只需使用text-align而不是float。

.alignme{
    text-align: right;
}

顺便说一句，你应该只在表格中使用离子标签 - 离子输入，离子复选框等。

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 

    }

Answer 4

Ionic对此有一个类：

<ion-label class="ion-text-center">
   Centered text
</ion-label>

Answer 5

在离子5中，这对我有用。

<ion-item>
    <ion-label slot="start">Left Side</ion-label>
    <ion-label slot="end">Right Side</ion-label>
</ion-item>

如何将离子标签对齐？

5 个答案: