定位复选框内嵌在离子

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> - 元素替换为<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;
}

<强>结果：

Answer 2

您可以使用代替

class Team(models.Model):
     team_id = models.IntegerField()
     team_logo = models.URLField()