Css 将按钮放入输入行

我喜欢在地图下面有一个输入行，包括按钮（见图）。它是一个指令组件。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>

我试着把按钮直接放在上面，但后来它就消失了

---

我如何才能将按钮按到带有国家和邮政编码的行中？

您可以使用

ion row

和

ion col

元素来决定所有东西应该放在哪里（）。因此，通过创建包含三列的单行，您应该能够将所有内容放在同一行中。然后，您可以使用

width

属性调整每列的宽度：

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

---

请添加你的css也。从你提供的代码，我想。输入有一个100%的宽度或给定显示：块；您可以尝试将所有内容放在一个

离子行

内，其中有三个

离子列

，一个用于选择，第二个用于输入，第三个用于按钮。@sebafereras，这就行了！colums没有找到一个好的默认宽度（国家不够宽）太棒了！我发布了一个答案，因为它太长了，无法发表评论…我仍然有一个问题：标签没有填满整个列空间，因此没有显示完整的国家名称，但是。。。现在。我能告诉col它应该在选择大小后调整吗？嗯。。。我认为这是不可能的，但也许你可以将保存select的列的宽度设置为足够大（

width-50

），使用css，你可以设置select元素的宽度以填充该宽度。我找到了一个好的解决方案：我将一个包含前两个元素的ion项放在一个列中，并在ion项中设置按钮。那看起来不错。Thx.听到这个消息很高兴：）

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