如何在离子输入旁边对齐离子段-Ionic4

Question

我正在尝试为各种公式设计一个可能以不同单位输入的计算器。具体来说，我需要进行这种调整（从左到右）：

本质上，我需要重复项目的“ 3列”布局。

下面，我将提供与我要实现的结果相比的实际结果的表单代码（尚无法发布图像，因此我添加了链接）。预先感谢您的帮助！

我尝试在网格系统中使用多个列，但这没有用。我也尝试过使用“插槽”。

<form #form="ngForm" (ionChange)="sendUserData(form)">
    <ion-grid>
      <ion-row>
        <ion-col
          no-margin
          no-padding
          size-sm="6"
          offset-sm="3"
          size-md="4"
          offset-md="4"
        >
          <ion-card color="primary" style="display:block">
            <ion-card-header>
              <ion-card-title text-center>{{ output }}</ion-card-title>
            </ion-card-header>
          </ion-card>
        </ion-col>
      </ion-row>
      <ion-row color="primary" justify-content-center>
        <ion-col align-self-center size-sm="6" size-md="4">
          <ion-item lines="full">
            <ion-label (click)="presentAlert()" slot="start" fixed
              >Dialysis:</ion-label
            >
            <ion-label
              color="secondary"
              (click)="presentAlert()"
              slot="start"
              fixed
              >More Info</ion-label
            >
            <ion-segment
              slot="end"
              mode="ios"
              no-padding
              no-margin
              (ionChange)="sendUserData()"
              [(ngModel)]="userData.dialysis"
              name="dialysis"
            >
              <ion-segment-button mode="ios" value="true">
                <ion-label>Yes</ion-label>
              </ion-segment-button>
              <ion-segment-button mode="ios" value="false">
                <ion-label>No</ion-label>
              </ion-segment-button>
            </ion-segment>
          </ion-item>
          <ion-item lines="full">
            <ion-label slot="start" fixed>Creatinine:</ion-label>
            <ion-input
              slot="start"
              placeholder="0"
              (ionChange)="sendUserData()"
              [(ngModel)]="userData.creatinine"
              name="creatinine"
              type="number"
              no-margin
              no-padding
            ></ion-input>

            <ion-segment
              slot="end"
              mode="ios"
              no-padding
              no-margin
              (ionChange)="sendUserData()"
              [(ngModel)]="userData.creatinineUnits"
              name="creatinineUnits"
            >
              <ion-segment-button mode="ios" value="umol">
                <ion-label>µmol/L</ion-label>
              </ion-segment-button>
              <ion-segment-button mode="ios" value="mgdl">
                <ion-label>mg/dL</ion-label>
              </ion-segment-button>
            </ion-segment>
          </ion-item>
          <ion-item lines="full">
            <ion-label slot="start" fixed>Bilirubin:</ion-label>
            <ion-input
              slot="start"
              placeholder="0"
              (ionChange)="sendUserData()"
              [(ngModel)]="userData.bilirubin"
              name="bilirubin"
              type="number"
              no-margin
              no-padding
            ></ion-input>

            <ion-segment
              slot="end"
              mode="ios"
              no-padding
              no-margin
              (ionChange)="sendUserData()"
              [(ngModel)]="userData.bilirubinUnits"
              name="bilirubinUnits"
            >
              <ion-segment-button mode="ios" value="umol">
                <ion-label>µmol/L</ion-label>
              </ion-segment-button>
              <ion-segment-button mode="ios" value="mgdl">
                <ion-label>mg/dL</ion-label>
              </ion-segment-button>
            </ion-segment>
          </ion-item>
          <ion-item lines="full">
            <ion-label slot="start" fixed>INR:</ion-label>
            <ion-input
              slot="start"
              placeholder="0"
              (ionChange)="sendUserData()"
              [(ngModel)]="userData.inr"
              name="inr"
              type="number"
              no-margin
              no-padding
            ></ion-input>
          </ion-item>
          <ion-item lines="full">
            <ion-label slot="start" fixed>Sodium:</ion-label>
            <ion-input
              slot="start"
              placeholder="0"
              (ionChange)="sendUserData()"
              [(ngModel)]="userData.sodium"
              name="sodium"
              type="number"
              no-margin
              no-padding
            ></ion-input>

            <ion-segment
              slot="end"
              mode="ios"
              no-padding
              no-margin
              (ionChange)="sendUserData()"
              [(ngModel)]="userData.sodiumUnits"
              name="sodiumUnits"
            >
              <ion-segment-button mode="ios" value="mmol">
                <ion-label>mmol/L</ion-label>
              </ion-segment-button>
              <ion-segment-button mode="ios" value="meq">
                <ion-label>mEq/L</ion-label>
              </ion-segment-button>
            </ion-segment>
          </ion-item>
          <ion-button
            (click)="clear()"
            id="clear"
            color="danger"
            fill="outline"
            expand="block"
            margin
            padding
            >Clear</ion-button
          >
        </ion-col>
      </ion-row>
    </ion-grid>
  </form>

这是我从上面的代码中得到的： https://i.imgur.com/la0IFXE.jpg

试图得到这样的东西：

https://i.imgur.com/3PYWf9I.jpg

Answer 1

想出了什么，对于任何好奇的人：

<ion-grid>
  <ion-item>
    <ion-row>
      <ion-col align-self-center size="4">
        <ion-label>Creatinine:</ion-label>
      </ion-col>
      <ion-col align-self-center size="3">
        <ion-input (ionChange)="sendUserData()" [(ngModel)]="userData.creatinine" placeholder="0" type="number"></ion-input>
      </ion-col>
      <ion-col align-self-center size="5">
        <ion-segment (ionChange)="sendUserData()" [(ngModel)]="userData.creatinineUnits">
          <ion-segment-button value="umol">
            <ion-label>µmol/L</ion-label>
          </ion-segment-button>
          <ion-segment-button value="mgdl">
            <ion-label>mg/dL</ion-label>
          </ion-segment-button>
        </ion-segment>
      </ion-col>
    </ion-row>
  </ion-item>
  <ion-item>
</ion-grid>