[英]how to add input boxes horizontally on button click
我需要在单击按钮时添加水平对齐的文本输入框每次单击“添加属性”时,都应创建一个新的输入框,但要水平放置在上一个输入框的右侧。 vue.js中有没有办法做到这一点
这将添加输入框,但在垂直方向上一个在另一个下方,我希望它们水平对齐
<hr>
<div class="md-layout">
<md-button v-on:click="addKey" class="md-raised md-primary">Add Attribute</md-button>
</div>
<md-content class="md-scrollbar" style="max-width:90vh; overflow: auto">
<div class="md-layout" v-for="value, index in keyList">
<md-field>
<md-input type="text" v-model="value.key" v-bind:id="'keyInput' + index" @keyup.enter="searchKey(value.key, index)"
@focus="updateKey(index)">
</md-input>
<md-input type="text" v-model="value.key" v-bind:id="'keyInput' + index" @keyup.enter="searchKey(value.key, index)"
@focus="updateKey(index)">
</md-input>
<md-button class="md-raised md-primary" :id="'keyButton' + index" @click="removeKey(index)"> X </md-button>
</md-field>
</div>
该CSS应该可以工作
input { display: inline; }
请在display属性中添加flex,因为默认情况下它为控件提供水平对齐。
<md-field style="display: flex;">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.