css - Ionic 3 ionic 单选按钮使用 flex 彼此靠近显示选项

标签 css ionic-framework sass ionic3

我需要将单选按钮选项放在一起:

<ion-content padding>
    <ion-list radio-group>
        <ion-list-header>
            Auto Manufacturers
        </ion-list-header>
        <ion-item *ngFor="let entry of array">

            <ion-radio (click)="getVal()" slot="start" [value]="entry"></ion-radio>
            <ion-label>&nbsp; {{entry}}</ion-label>
        </ion-item>
    </ion-list>
</ion-content>

我尝试使用 flex,但没有成功:

显示:flex

当前行为是 2 个选项在彼此下方。但是我怎样才能使用 flex 将它们彼此靠近显示呢?

这是一个stackblitz

最佳答案

你也可以使用网格系统来实现:

<ion-content padding>
<ion-list radio-group>
  <ion-list-header>
     Auto Manufacturers
  </ion-list-header>
  <ion-row>
    <ion-col *ngFor="let entry of array">
      <ion-item >
        <ion-radio (click)="getVal()" slot="start" [value]="entry"></ion-radio>
       <ion-label>&nbsp; {{entry}}</ion-label>
      </ion-item>
    </ion-col>
  </ion-row>
</ion-list>
</ion-content>

关于css - Ionic 3 ionic 单选按钮使用 flex 彼此靠近显示选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56128756/

相关文章:

javascript - 获取动态表行的 URL

html - 是否可以让基于 flexbox 列的列表中的第一项为 100% 而其他项不是?

ionic-framework - ionic cli 与 ionic cli2

javascript - Ionic、Angular 在按键事件上获取输入类型值

internet-explorer - IE 创建字体图标奇怪的下划线

jquery - 如何在固定布局表中创建可变宽度?

css - ng 风格的范围值

javascript - 如何在 Controller As 语法中使用 Ionic Popup with scope?

ruby-on-rails - Rails SASS 编译器不知道 compass 动画

css - 如何在 css(或 scss/sass)中为文本添加渐变边框