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

Question

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

It may be easy to change when not using elementUI.I want to make the label and the input on the same line and change the width of the input.How can I do it?

Answer 1

Adding the label and input field on the same line can be done by using the following properties label-position and label-width

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

@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/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>