Ionic 5 表单布局 - 如何并排放置输入和 select

Question

这个问题也被问到，但是这个解决方案已经有好几年了，而且不太适合我，因为它是 Ionic 的早期版本。我想将 City 和 State 作为离子输入（带有浮动标签）和 ion-select（无标签）并排放置。下面是我的 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

您可以在 select 选项上使用 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>

Ionic 5 表单布局 - 如何并排放置输入和 select

Ionic 5 form layout - How do I put input and select side-by-side

html

mobile

ionic-framework