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

客官°小女子只卖身不卖艺 2023-09-29 12:30 4阅读 0赞

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

![7ecec7b449b446bc889eedb7ac13eaa4.png][]

再看看官网

![e1ec82f8ef8541aca4c6617ff3dac005.png][]

有一定间距，而且两种标签很自然。突然想到我的网页的都没有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'

![2119a3ab19cc41e8a3e9004da8686445.png][]

[7ecec7b449b446bc889eedb7ac13eaa4.png]: https://img-blog.csdnimg.cn/7ecec7b449b446bc889eedb7ac13eaa4.png
[e1ec82f8ef8541aca4c6617ff3dac005.png]: https://img-blog.csdnimg.cn/e1ec82f8ef8541aca4c6617ff3dac005.png
[2119a3ab19cc41e8a3e9004da8686445.png]: https://img-blog.csdnimg.cn/2119a3ab19cc41e8a3e9004da8686445.png