并排输入的离子标签，将标签右侧对齐

Question

我使用的是 Ionic 5，并且有一些带有输入的标签，其中标签在左侧，输入在标签旁边。

代码如下：

  <div id="container">
    <ion-item>
      <ion-label>Label 1</ion-label>
      <ion-input placeholder="something here"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label>Another Label</ion-label>
      <ion-input placeholder="something here"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label>Third Label</ion-label>
      <ion-input placeholder="something here"></ion-input>
    </ion-item>
  </div>

正如您在上面看到的，标签的大小不同。

如何使标签的右侧对齐？

Answer 1

在你的 scss 中添加这个并且应该可以工作：

ion-item > ion-label{
    flex: content;
}

并排输入的离子标签，将标签右侧对齐

Ionic Label with input side by side, align label right sides

ionic-framework

ionic4

ionic5