离子输入并排选择

Question

我想同时显示一个输入和一个选择。

我尝试了几种无济于事的方法。

当前代码如下

<form name="signup">
<ion-list>
<label class="item item-input">
<input placeholder="Identificación" name="identificacion" type="text" ng-click="registro.msg = null" ng-model="registro.identificacion" required>
</label>
<label class="item item-input item-select" name="tipo_id" ng-model="registro.tipo_id">
<div class="input-label">Tipo de Identificación</div>
<select ng-model="registro.tipo_id">
<option ng-repeat="tipo in defaultTipo" value="{{tipo.id}}" ng-selected="{{tipo.selected}}">{{tipo.tipo}}</option>
</select>
</label>
</ion-list>
</form>

输出以下内容：

我需要在同一行中将输入置于左侧，将选择置于右侧。

有任何想法吗？

Answer 1

您可以简单地使用离子网格系统，但是将它们并排放置不会在电话上留下很多空间。您可以在此处了解更多信息：http : //ionicframework.com/docs/components/#grid-explicit

<form name="signup">
<ion-list>
**<div class="row">**
**<div class="col">**
<label class="item item-input">
<input placeholder="Identificación" name="identificacion" type="text" ng-click="registro.msg = null" ng-model="registro.identificacion" required>
</label>
</div>
**<div class="col">**
<label class="item item-input item-select" name="tipo_id" ng-model="registro.tipo_id">
<div class="input-label">Tipo de Identificación</div>
<select ng-model="registro.tipo_id">
<option ng-repeat="tipo in defaultTipo" value="{{tipo.id}}" ng-selected="{{tipo.selected}}">{{tipo.tipo}}</option>
</select>
</label>
</div>
</div>
</ion-list>
</form>