Ionic 5 表单布局 - 如何并排输入和选择

Question

here 也有人问过这个问题，但是这个解决方案已经有几年的历史了，而且不适合我，因为它是 Ionic 的早期版本。我想将 City 和 State 作为离子输入（带有浮动标签）和离子选择（无标签）彼此相邻。下面是我的 HTML 和结果显示： [![结果][1]][1]

  <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]: https://i.stack.imgur.com/q5Hqj.png

Answer 1

您可以在选择的选项上使用带有堆叠位置的ion-label。

<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-label position="stacked">City</ion-label>
          <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>