кнопку Установить в строке ввода

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%