将按钮放入输入行

Question

我喜欢在地图下方有一条输入线，包括按钮（见图）。它是一个指令组件。 HTML是：

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />

<form [formGroup]="searchMapForm" (ngSubmit)="search(searchMapForm.value)">
    <ion-item class="button">
        <div id="map"></div>
    </ion-item>
    <ion-item class="input">
        <ion-select placeholder="Land" formControlName="country">
            <ion-option value="DE" checked="true">Deutschland</ion-option>
            <ion-option value="AT">Österreich</ion-option>
            <ion-option value="CH">Schweiz</ion-option> 
        </ion-select>
        <ion-input placeholder="Postleitzahl" type="text" class="map-search" formControlName="postalCode"></ion-input>
    </ion-item> 
    <ion-item class="button">
        <div ion-button outline round small color="secondary" (click)="search(searchMapForm.value)">Suchen  </div>
    </ion-item>
</form>

CSS是（我没有做任何事情）：

search-map {
  #map {
    height: 30vh;
  }
}

我试图将按钮直接放在上面，但随后就消失了。

如何将按钮添加到包含国家/地区和邮政编码的行中？

Answer 1

您可以使用ion-row和ion-col元素来决定应该放置所有内容的位置（docs）。因此，通过创建具有三列的单行，您应该能够将所有内容放在同一行中。然后，您可以使用width属性调整每列的宽度：

<ion-grid>
  <ion-row>
    <ion-col width-10>This column will take 10% of space</ion-col>
  </ion-row>
</ion-grid>

可能的值可能是：

Explicit Column Percentage Attributes
width-10    10%
width-20    20%
width-25    25%
width-33    33.3333%
width-50    50%
width-67    66.6666%
width-75    75%
width-80    80%
width-90    90%