elementui form表单上下左右对齐的问题

发布于 2022-09-12 00:25:36 字数 2744 浏览 18 评论 0

image.png

如何让form表单label对齐 以及上下的input select同时对齐
`

  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" inline>
    <div class="form">
      <el-form-item label="选择设备:" prop="sortNo">
        <el-select v-model="ruleForm.region" placeholder="请选择">
          <el-option label="全部" value="全部"></el-option>
          <el-option label="H+" value="H+"></el-option>
          <el-option label="AdminTLE V3" value="AdminTLE V3"></el-option>
        </el-select>
      </el-form-item>
    </div>
    <div>
      <el-form-item label="设备图片:" class="hotel-logo">
        <el-upload
          action="#"
          :show-file-list="false"
          :on-change="changeLogo"
          :on-error="uploadFail"
          :on-success="uploadLogo"
        >
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
    </div>
    <div class="form">
      <el-form-item label="资产编号:" prop="sortNo">
        <el-input v-model="ruleForm.sortNo" placeholder="请输入资产编号"></el-input>
      </el-form-item>
      <el-form-item label="型号/规格:" prop="sortNo">
        <el-input v-model="ruleForm.sortNo" placeholder="请输入任务名称"></el-input>
      </el-form-item>
    </div>
    <div class="form">
      <el-form-item label="仪器编号:" prop="sortNo">
        <el-input v-model="ruleForm.sortNo" placeholder="请输入资产编号"></el-input>
      </el-form-item>
      <el-form-item label="生产厂家:" prop="sortNo">
        <el-input v-model="ruleForm.sortNo" placeholder="请输入任务名称"></el-input>
      </el-form-item>
    </div>
    <div class="form">
      <el-form-item label="依据标准:" prop="sortNo">
        <el-select v-model="ruleForm.region" placeholder="请选择">
          <el-option label="全部" value="全部"></el-option>
          <el-option label="H+" value="H+"></el-option>
          <el-option label="AdminTLE V3" value="AdminTLE V3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态:" prop="sortNo">
        <el-select v-model="ruleForm.region" placeholder="请选择">
          <el-option label="全部" value="全部"></el-option>
          <el-option label="H+" value="H+"></el-option>
          <el-option label="AdminTLE V3" value="AdminTLE V3"></el-option>
        </el-select>
      </el-form-item>
    </div>

`

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文