标签和组单选按钮水平对齐

Question

我有一个标签和组单选按钮(两个),我想让它像图片中一样水平对齐.

我试过这段代码:

`<ion-row radio-group [(ngModel)]="Sexe">
  <ion-col>
      <ion-item>
        <ion-label color="primary">Sexe</ion-label>
        <ion-radio value="Mr"></ion-radio>
        <ion-radio value="Mme"></ion-radio>
      </ion-item>
  </ion-col>
</ion-row>`

还有这段代码:

`<ion-row radio-group [(ngModel)]="Sexe">
  <ion-col>
      <ion-item>
        <ion-label color="primary">Sexe</ion-label>
      </ion-item>
      <ion-item>
        <ion-radio value="Mr"></ion-radio>
      </ion-item>
      <ion-item>
          <ion-radio value="Mme"></ion-radio>
      </ion-item>
  </ion-col>
</ion-row>`

但我没有我想要的结果.

Answer 1

你可以使用ion-row和ion-col元素.请看看这个工作的plunker.

  <ion-row radio-group [(ngModel)]="sexe">
    <ion-col>
      <ion-item>
        Sexe
      </ion-item>
    </ion-col>
    <ion-col>
      <ion-item>
        <ion-label>Homme</ion-label>
        <ion-radio value="homme"></ion-radio>
      </ion-item>
    </ion-col>
    <ion-col>
      <ion-item>
       <ion-label>Femme</ion-label>
        <ion-radio value="femme"></ion-radio>
      </ion-item>
    </ion-col>
  </ion-row>

由于我们使用单行和三列,标题和广播项目将全部放在同一行(水平对齐).