我想并排显示一个输入和一个选择。
我尝试了几种方法都无济于事。
当前代码如下
<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 放在同一行的右边。
有什么想法吗?
最佳答案
您可以简单地使用 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>
关于ionic-framework - ionic 输入并排选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31008491/