先上图:
html 一行内有多个col, col内有1个button
<ion-row class="row-button row-list" style="margin-top:6px;">
<ion-col *ngFor="let item of group.Items" col-6 (click)="selected(item)">
<button ion-item no-lines detail-none>
<div class="item-text" >{{item.text}}</div>
<div class="item-remark">{{item.remark}}</div>
</button>
<div *ngIf="item.checked" class="button-checked"></div>
</ion-col>
</ion-row>
css
/*偿试解决:当有换行时,同一行按钮高度不一致*/
ion-col {
display: flex;
button {
align-self: stretch;
}
}
关键点:
1、ion-col 设 display: flex; (用flex布局)
2、button 设 align-self: stretch; (撑满)