在中心获得离子无线电

Question

我目前正在使用 Ionic 3 在 html 中创建隐私页面，我的输出应该是这样的：

现在使用我的代码，这就是我得到的：

这是我的代码：

<ion-list radio-group [(ngModel)]="flag1">
  <ion-grid item-center style="border-style: none">
  <ion-row item-center style="border-style: none">
  <ion-col col-4>
  <ion-item style="border-style: none" item-center>
      <ion-radio color="dark" [value]="true"></ion-radio>
      <ion-label class="radio-text">Si</ion-label>
  </ion-item>
  </ion-col>
  <ion-col col-4>
  <ion-item style="border-style: none" item-center>
      <ion-radio item-left color="dark" [value]="false"></ion-radio>
      <ion-label item-center class="radio-text">No</ion-label>
  </ion-item>
  </ion-col>
  </ion-row>
  </ion-grid>
</ion-list>

我的 CSS 看起来像这样：

.radio-text {
  font-size: 12px;
  white-space: pre-line;
  text-justify: auto;
  display: inline-block;
}

还需要删除那个烦人的黑条，已经尝试过使用边框 0 但没有用，有人有解决方案吗？

Answer 1

在单选按钮前居中添加<ion-col col-2></ion-col>：

<ion-list radio-group [(ngModel)]="flag1">
  <ion-grid item-center style="border-style: none">
  <ion-row item-center style="border-style: none">
  <ion-col col-2></ion-col>
  <ion-col col-4>
  <ion-item style="border-style: none" item-center>
      <ion-radio item-left  color="dark" [value]="true"></ion-radio>
      <ion-label class="radio-text">Si</ion-label>
  </ion-item>
  </ion-col>
  <ion-col col-4>
  <ion-item style="border-style: none" item-center>
      <ion-radio item-left color="dark" [value]="false"></ion-radio>
      <ion-label  class="radio-text">No</ion-label>
  </ion-item>
  </ion-col>
  </ion-row>
  </ion-grid>
</ion-list>

要设置正方形的样式，请使用：

.radio-text {
  font-size: 12px;
  white-space: pre-line;
  text-justify: auto;
  display: inline-block;
}
.radio-md .radio-icon, .radio-wp .radio-icon{
border-radius: unset !important;
}
.input-wrapper {
  -webkit-flex:  0!important;
    -ms-flex: 0!important;
    flex: 0!important; 
}
.item-md .radio-md[item-left], .item-md .radio-md[item-start] {
     margin: 0!important;
}