＜el-input＞标签和＜el-button＞标签宽度不一致（ElementUI样式未使用）

今天在使用ElementUI快速构建登录页面组件的后，发现<el-input>标签和<el-button>标签宽度没有对齐，和官网显示不一致。

再看看官网

 

有一定间距，而且两种标签很自然。突然想到我的网页的都没有element自带的一些样式，就只有光秃秃的骨架，连代码里面的样式都更改不了。

<el-form class="login-container" label-position="left"
           label-width="0px">
    <h3 class="login_title">系统登录</h3>
    <el-form-item>
      <el-input type="text" v-model="loginForm.username"
                auto-complete="off" placeholder="账号"></el-input>
    </el-form-item>
    <el-form-item>
      <el-input type="password" v-model="loginForm.password"
                auto-complete="off" placeholder="密码"></el-input>
    </el-form-item>
    <el-form-item style="width: 100%">
      <el-button type="primary" style="width: 100%;background: #505458;border: none" v-on:click="login">登录</el-button>
    </el-form-item>
  </el-form>

折腾了一会，才想到了应该是element组件的样式没有导进项目，回头一看，果然没有导入。 （呜呜呜，菜狗）

解决办法：在main.js顶部加上

import 'element-ui/lib/theme-chalk/index.css'

 

扫描二维码关注公众号，回复： 14609461 查看本文章