代码之家 › 专栏 › 技术社区 › karlo1zg

在ionic中内联定位复选框

ionic2 ionic-framework checkbox css

karlo1zg · 技术社区 · 7 年前

我需要将两个复选框与它们所属的位置并排放置

到目前为止,我尝试的一切都没有给我想要的输出,所以这是我现在在应用程序中的代码。这在我的表单元素中:

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

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

2 回复 | 直到 7 年前

robbannn 7 年前

您可以更换 <ion-item> -具有的元素 <div> <离子项目; 元素。我还将复选框包装在一个外层 <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>

SCS:

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

结果:

sulaiman 5 年前

您可以使用代替

 <ion-item> 
    <span>SMS &nbsp; </span>
    <ion-checkbox></ion-checkbox>
</ion-item>

推荐文章

Mickey Vershbow · 无法获取复选框的“checked”属性

2 年前

XAZG ÐÐµÐ¸Ð·Ð²ÐµÑÑÐ½ÑÐ¹ · 如何在for js之后重置字符串变量

2 年前

SãOãNã JãOãã · Google sheets复选标记条件格式化

2 年前

Ranjith Raina · 在jquery中,可以将所有复选框值转换为逗号分隔的字符串

2 年前

Alex · 引导对齐表单开关左侧的标签

2 年前

Khilen Maniyar · 角度2:带有复选框的阵列工作不正常

6 年前

Yash Saraiya · jQuery datatable:在每个分页上启用几个文本框

6 年前

Kais · 带有输入复选框的表格选中/取消选中

6 年前

Silu K · 单击复选框后,如何将之前的所有复选框设置为在angular 4中选中

6 年前

yuggmeister · 如何使自定义复选框可访问?

6 年前