如何在同一行上制作标签和 el-input？

Question

<el-form>
  <el-form-item label="password" prop="password">
    <el-input type="password" autocomplete="off"></el-input>
  </el-form-item>
</el-form>

不使用时可能很容易改变elementUI.I想使标签和输入在同一行并改变宽度input.How我可以吗？

Answer 1

可以使用以下属性 label-position 和 label-width

将标签和输入字段添加到同一行

var Main = {
    data() {
      return {
        password: ""
      } 
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css");

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.7/lib/index.js"></script>
<div id="app">
<el-form label-position="left" label-width="200px">
  <el-form-item label="password" prop="password">
    <el-input type="password" autocomplete="off"></el-input>
  </el-form-item>
</el-form>
</div>

如何在同一行上制作标签和 el-input？

How can I make the label and the el-input on the same line?

css

element-ui