离子行未正确对齐

Question

我在网格中有离子行。每行由四个标签和末尾的 ion-select 组成。但是 ion-select 没有正确水平对齐。有人可以建议如何修复对齐

                  <ion-grid>

                    <ion-row align-items-center>
                        <ion-col>
                            <label style="font-weight: bolder">Item</label>
                        </ion-col>
                        <ion-col>
                            <label style="font-weight: bolder">Qty</label>
                        </ion-col>
                        <ion-col>
                            <label style="font-weight: bolder">Unit Price</label>
                        </ion-col>
                        <ion-col>
                            <label style="font-weight: bolder">Total</label>
                        </ion-col>
                        <ion-col *ngIf="isCustomerView === false || selectedOrder.STATUS === OrderStatus.READY">
                            <label style="font-weight: bolder">Status</label>
                        </ion-col>
                    </ion-row>
                    <ion-row *ngFor="let orderElement of orderElements" align-items-center>
                        <ion-col >
                            <label>{{orderElement.PRODUCT_NAME}} </label>
                        </ion-col>
                        <ion-col>
                            <label>{{orderElement.QUANTITY}} {{orderElement.UNIT}} </label>
                        </ion-col>
                        <ion-col>
                            <label>{{orderElement.UNIT_PRICE}} </label>
                        </ion-col>
                        <ion-col>
                            <label>{{orderElement.UNIT_PRICE * orderElement.QUANTITY}} </label>
                        </ion-col>
                        <ion-col *ngIf="isCustomerView === false || selectedOrder.STATUS === OrderStatus.READY">
                            <ion-select [value]="orderElement.STATUS">
                                <ion-select-option *ngFor="let status of orderElementStatus" [value]="status">{{status}}</ion-select-option>
                            </ion-select>
                        </ion-col>
                    </ion-row>
                </ion-grid>

输出看起来像附件

Answer 1

您需要消除顶部的填充并从 ion-select 开始。此规则将为您做到这一点：

ion-select {
    --padding-top: 0;
    --padding-start: 0;
}

Final Result

离子行未正确对齐

ionic row is not aligned properly

ionic4