ボタンを入力行に合わせる

Question

私は、ボタン（画像参照）を含め、地図の下に入力行があることが好きです。これはディレクティブコンポーネントです。 CSSは、（私はそこに何もしませんでした）である

<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> 

：HTMLがある

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

私は上記の中で直接ボタンを配置しようとしたが、それはちょうど消えました。

ボタンを国や郵便番号の行に追加するにはどうすればよいですか？

Answer 1

ion-rowおよびion-col要素を使用して、すべての配置先を指定できます（docs）。したがって、3つの列を持つ単一の行を作成すると、すべてを同じ行に配置できるはずです。その後、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%