如何在ionic 3中水平对齐两个单选按钮

时间：2018-12-20 06:44:59

标签： html ionic3

我正试图将两个单选按钮对齐或在ionic 3中水平对齐，如下图所示。  enter image description here

html 

<ion-item>
      <ion-row radio-group >
      <ion-col>
      <ion-item>
        Batch Medium
      </ion-item>
      </ion-col>
       <ion-col>
      <ion-item>
        <ion-label>English</ion-label>
        <ion-radio >English</ion-radio>
      </ion-item>
    </ion-col>
    <ion-col>
      <ion-item>
       <ion-label>Bilingual</ion-label>
        <ion-radio>Bilingual</ion-radio>
      </ion-item>
    </ion-col>
  </ion-row>    
    </ion-item>

尝试此代码后，我得到黑屏。 任何建议或帮助将不胜感激。

2 个答案:

答案 0 :(得分：1)

那就像冗长的丑陋：）

这是我的选择

  • 外表

enter image description here

或

enter image description here

  • HTML enter image description here

  • CSS enter image description here

  • 背后的代码 enter image description here enter image description here

您可以通过flexbox进行更多调整

您在任何框架上投入的资金越少越好：）

享受！

答案 1 :(得分：0)

像下面的代码一样试用。

 <ion-row radio-group [(ngModel)]="batchmedium">
        <ion-col>
          <ion-item>
            Batch Medium*
          </ion-item>
        </ion-col>
        <ion-col>
          <ion-item>
            <ion-label> English </ion-label>
            <ion-radio value="English"></ion-radio>
          </ion-item>
        </ion-col>
        <ion-col>
          <ion-item>
           <ion-label> Bilingual </ion-label>
            <ion-radio value="Bilingual"></ion-radio>
          </ion-item>
        </ion-col>
      </ion-row>

查看此链接以获取更多详细信息http://plnkr.co/edit/AdFPOUaufyFYXqBxNiGg?p=preview

相关问题
最新问题