离子项内容布局

Question

我希望在左侧和右侧有离子项目的两个离子标签，并在它们之间进行离子切换。

这是html：

<ion-row>
  <ion-col>
   <ion-list>
    <ion-item>
        <ion-label>Income</ion-label>
        <ion-toggle name="isIncome" [(ngModel)]="isIncome"></ion-toggle>
        <ion-label >Outcome</ion-label>              
    </ion-item>
    </ion-list>
   </ion-col>
  </ion-row>

我试图将一些自定义样式（float，position ...）放到离子标签元素中，但它没有起作用。有没有办法实现这个目标？它不需要是离子标签，可能我应该使用其他容器吗？

感谢。

Answer 1

试试这个

<ion-item>
    <ion-row>
       <ion-col text-left>
           <ion-label>Income</ion-label>
       </ion-col>
       <ion-col text-center>
           <ion-toggle name="isIncome" [(ngModel)]="isIncome"></ion-toggle>
       </ion-col>
       <ion-col text-right>
           <ion-label >Outcome</ion-label>              
       </ion-col>
    </ion-row>
</ion-item>

Answer 2

看起来像离子项将寻找离子标签并将两个标签包装在div中。 我们可以通过这种方式破解它，并覆盖边距0：

HTML

list.add( writer.toString() )

CSS

  <ion-item>
    <ion-label>
      <ion-label float-left>Income</ion-label>
      <ion-label float-right>Outcome</ion-label>
      <ion-toggle name="isIncome" [(ngModel)]="isIncome" class="ion-toggle-class"></ion-toggle>
    </ion-label>
  </ion-item> 

在移动设备上看起来很不错，但是如果你想让两个标签更接近网页上的切换，你可能想要像RezaRahmati的回答那样使用离子行