Css 在ionic中内联定位复选框

我需要将两个复选框放置在它们所属的位置，并彼此相邻 标签位于每个复选框的左侧。 下面是一张更好理解的图片：（图片上有一个电子邮件复选框，但应用程序中不存在，所以忽略它，应该只有两个复选框）

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

  <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>

电话
短信

---

我不会提供样式代码，因为它目前不起作用。

您可以将

-元素替换为

，以摆脱从

元素中获得的额外样式。我还将复选框包装在一个外部

：

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>

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

结果：

---

您可以将

-元素替换为

，以摆脱

元素带来的额外样式。我还将复选框包装在一个外部

：

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>

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

结果：

---

您可以使用而不是

短讯服务

您可以使用而不是

短讯服务

您应该提供CSS，以显示您尝试过的内容，并检查代码不起作用的原因。@Goombah我只是想为您的问题添加CSS样式，但robban提供了有效的示例。无论如何，谢谢你。你应该提供你的CSS来展示你所做的尝试，并检查代码为什么不起作用。@Goombah我只是想为你的问题添加CSS样式，但robban提供了一个有效的示例。无论如何，谢谢你对不起，苏莱曼，但这不是一个好的解决方案。如果仅使用元素而不是复选框，则当用户单击范围时，将不会选中复选框。另外，你没抓住重点。它应该将两个标签+复选框并排放置，内联，如照片中所示。对不起，苏莱曼，但这不是一个好的解决方案。如果仅使用元素而不是复选框，则当用户单击范围时，将不会选中复选框。另外，你没抓住重点。它应该将两个标签+复选框并排放置，如照片中所示。