css - 在中心获得 ionic radio

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

并且还需要删除那个烦人的黑条，已经尝试过使用 border 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;
}