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

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

添加属性
X

这个CSS应该可以工作

input { display: inline; }

---

请在“显示”属性中添加flex，因为它提供了与屏幕的水平对齐 默认情况下的控件

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

您正在使用哪个库？能否提供您的

addKey

方法@developer这主要与您使用的样式有关，您在这里使用的是棱角材质设计吗？我正在使用js和CSS。请让我知道它如何适合我共享的代码。谢谢你必须添加一个标签，并把css放在里面。通过这种方式，所有输入元素将水平对齐。您是否可以在答案中添加更多细节，以便遇到相同问题的人也可以使用您的解决方案？是的，当然@克雷德