标签：__ el style form 120px item margin left

问题：el-form标签中，由于设置了label-width="120px"，导致每一个el-form-item标签都增多了一个样式style="margin-left: 120px;"

效果如下：

部分原代码如下：

<template>
  <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="800px">
    <el-form ref="form" :rules="rules" :model="edit" label-position="right" label-width="120px" class="aa">
      <el-form-item>
        <el-row>
          <el-col>
            <el-form-item label="用户名：" prop="username">
              <el-input v-model.trim="username" name="username" type="text" auto-complete="on" placeholder="请输入用户名"
                        style="background:transparent;width: 500px;" disabled/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取消</el-button>
      <el-button type="primary" @click="update(edit)">确认</el-button>
    </div>
  </el-dialog>
</template>

浏览器中解析后如下所示：

解决办法：

给form 加class="aa"

样式如下：

<style scoped>
.aa >>> .el-form-item__content {
   margin-left:0px !important;
}
</style>

修改后效果如下所示：

标签：__,el,style,form,120px,item,margin,left
来源： https://www.cnblogs.com/zwh0910/p/16434764.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。