[英]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.