element-label标签里的文字怎么跑到上面了？

站长

2024年07月06日 09:03 · 阅读数 7

问题描述

我在官网看的标签名字都是在输入框的左边

问题出现的环境背景及自己尝试过哪些方法

相关代码

这是我写的

<template>
    <div id="register-page">
        
        <!-- <div id="wrapper">
            <div id="header">
                <div style="float:right;padding-top: 24px"><span v-text="time"/> &emsp;</div>
            </div>
        </div> -->
    <!-- <body id="register-page"> -->
        <div id="register-container">
      <el-form ><!-- class="register-container" -->
        <h3 class="register_title">系统注册</h3>
        <!--内容主体区域-->
        <el-form-item label="用户名" >
          <el-input
          type="text"
          v-model="registerForm.userName"
          auto-complete="off"
          placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="registerForm.password" show-password></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio v-model="registerForm.sex" label="男">男</el-radio>
          <el-radio v-model="registerForm.sex" label="女">女</el-radio>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="registerForm.email"></el-input>
        </el-form-item>
        <!-- 前后端分享架构-动态访问验证码 -->
        <img :src="src" id="img-vcode" @click="getImage" :key="key">
        <el-form-item label="验证码" prop="code">
          <el-input v-model="registerForm.code"></el-input>
        </el-form-item>
        <el-form-item style="width:100%">
            <el-button
              type="button"
              style="width:100%; border:none"
              @click="register"
            >注册</el-button>
        </el-form-item>
        <el-form-item style="width:100%">
            <el-button
              type="button"
              style="width:100%; border:none"
              @click="toLogin"
            >去登录</el-button>
        </el-form-item>
    </el-form>
    <!-- </body> -->
</div>
</div>
  </template>
  
  <script>
import { userAdd } from '../api/user';

  export default {
    name: "Register",
    data() {
        return{
            registerForm:{
                //用户
        userName: "",
        password: "",
        sex: "",
        email: "",
        src:"",
        key:"",
        time:"",
            }
        }
    },
    methods: {
        register(){
            if(!this.registerForm.userName){
                alert("用户名不能为空！")
            }
        },
        toLogin(){
            this.$router.push("/login")
        },
        getImage(){
            const _this=this;
            this.axios.get("/user/getImage").then((res)=>{
                console.log(res);
                _this.src="data:image/png;base64,"+res.data.image;
                _this.key=res.data.key;
            })
        },
    }, 
        createCode(){
            this.getImage();//获取验证码
            let now=new Date();
            this.time=`${now.getFullYear()}-${now.getMonth()+1}-${now.getDate()}`;
        } 
  }
  </script>
  
  <style scoped>
  #register-page {
    background: url("../assets/img/bg.jpg") no-repeat;
    background-position: center;
    height: 100%;
    width: 100%;
    background-size: cover;
    position: fixed;
  }
  body {
    margin: 0px;
  }
  #register-container {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 29px auto;
    width: 360px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }
  
  .egister_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }

  #img-vcode{
    width:56px;
    height:21px;
    float:right;
    position:relative;
    top:2px;
    left:-6px
  }
  </style>

element-label标签里的文字怎么跑到上面了？可以看到：邮箱、验证码、用户名等文字都在输入框的上边

你期待的结果是什么？实际看到的错误信息又是什么？

element-label标签里的文字怎么跑到上面了？而官网的都在左边

1个回答

test

2024-07-06

<el-form label-width="100px">

适合作为回答的

经过验证的有效解决办法
自己的经验指引，对解决问题有帮助
遵循 Markdown 语法排版，代码语义正确

不该作为回答的

询问内容细节或回复楼层
与题目无关的内容
“赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容