Question

我需要在单击按钮时添加水平对齐的文本输入框每次我单击“添加属性”时，都应创建一个新的输入框，但将其水平放置在上一个输入框的右侧。是否可以在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>

Answer 1

此CSS应该可以工作

input { display: inline; }

Answer 2

请在display属性中添加flex，因为它可以使水平对齐默认情况下进行控制。

<md-field style="display: flex;">

如何在单击按钮时水平添加输入框

2 个答案: