Ionic 5表单布局：如何实现ion-input与ion-select组件并排显示

你当前的实现存在布局错位的核心原因是：左侧带浮动标签的ion-item会默认预留浮动标签的顶部占位高度，右侧无标签的ion-item高度更小，导致两个组件的底部水平线不对齐。

你当前的实现效果如下：

你当前使用的代码：

<ion-grid>
  <ion-row>
    <ion-col size="8">
      <ion-item lines="full">
        <ion-label position="floating">City</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>
    </ion-col>
    <ion-col size="4">
      <ion-item lines="full">
        <ion-select placeholder="State">
          <ion-select-option [value]="st" *ngFor="let st of [{ name: 'Louisiana'},{name: 'Texas'}]">{{st.name}}
          </ion-select-option>
        </ion-select>
      </ion-item>
    </ion-col>
  </ion-row>
</ion-grid>

方案1：添加隐藏浮动标签（无需额外自定义CSS，最适配Ionic原生布局逻辑） #

直接在右侧ion-item内添加一个空的隐藏浮动标签，让两侧ion-item的布局高度自动保持一致，修改后的代码如下：

<ion-grid>
  <ion-row>
    <ion-col size="8">
      <ion-item lines="full">
        <ion-label position="floating">城市</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>
    </ion-col>
    <ion-col size="4">
      <ion-item lines="full">
        <!-- 新增隐藏的浮动标签，用于对齐高度 -->
        <ion-label position="floating" class="ion-hide"></ion-label>
        <ion-select placeholder="州">
          <ion-select-option [value]="st" *ngFor="let st of [{ name: '路易斯安那'},{name: '得克萨斯'}]">{{st.name}}
          </ion-select-option>
        </ion-select>
      </ion-item>
    </ion-col>
  </ion-row>
</ion-grid>

Ionic内置的ion-hide类会自动隐藏标签，不会影响视觉效果，同时保留标签的布局占位高度，完美实现两侧对齐。

方案2：自定义CSS调整高度 #

如果不想添加冗余的空标签，可以给右侧的ion-item添加自定义类调整样式：

1. 给右侧ion-item添加自定义类：

<ion-item lines="full" class="state-select-item">

2. 加入对应CSS样式：

.state-select-item {
  /* 匹配带浮动标签的ion-item默认高度，可根据实际样式调整 */
  min-height: 56px;
  --inner-padding-top: 16px;
}

两种方案均兼容Ionic 5所有版本，不会出现布局错乱问题。

内容的提问来源于stack exchange，提问作者oakfish56