离子中内联定位复选框

Question

我需要将两个复选框彼此串联放置，并在每个复选框的左侧放置其所属的标签。为了更好的理解，这是图片：（图片上有一个应用程序中不存在的电子邮件复选框，因此只需忽略它，应该只有两个复选框）

到目前为止，我尝试的所有操作都没有给我想要的输出，所以这是我现在在应用程序中拥有的代码。这是我的表单元素：

  <ion-item>
    <ion-label text-uppercase>Phone Calls</ion-label>
    <ion-checkbox name="receive_calls"
      [ngModel]="(contact$ | async).receive_calls">
    </ion-checkbox>
  </ion-item>
  <ion-item>
    <ion-label text-uppercase>Text Messages</ion-label>
    <ion-checkbox name="receive_messages"
      [ngModel]="(contact$ | async).receive_messages">
    </ion-checkbox>
  </ion-item>

我不会提供样式代码，因为它目前无法使用。

Answer 1

您可以将<ion-item>-elements 替换为<div>，以摆脱元素带来的多余样式<ion-item>。我也将复选框包装在外面<div>：

HTML：

<div>
  <div float-left class="my-checkbox">
    <ion-label text-uppercase>Phone Calls</ion-label>
    <ion-checkbox name="receive_calls">
    </ion-checkbox>
  </div>
  <div float-right class="my-checkbox">
    <ion-label text-uppercase>Text Messages</ion-label>
    <ion-checkbox name="receive_messages">
    </ion-checkbox>
  </div>
</div>

SCSS：

.my-checkbox {
    display: flex;
    align-items: center;
}

结果：