ionic-framework - ionic 输入并排选择

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>

输出如下:

我需要将 input 放在左边，select 放在同一行的右边。

有什么想法吗？

Answer 1

您可以简单地使用 ionic 网格系统，但将它们并排放置不会在手机上留下太多空间。您可以在这里阅读更多相关信息: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>