表单对齐

最新推荐文章于 2022-02-28 13:30:00 发布

GY_java0819

最新推荐文章于 2022-02-28 13:30:00 发布

阅读量885

点赞数 4

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/GY_java0819/article/details/109554437

版权

javascript 专栏收录该内容

3 篇文章

订阅专栏

在这里插入图片描述

今天做练习的时候题目要求如上对齐但是我做出来是始终是这样的效果。。。
在这里插入图片描述

翻看了很多大佬的讲解，发现其实只需要给文字描述部分加上标签并对该标签内的所有字体做格式规定就可以完成对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>个人信息登记表</h1>    
    <style>
        label{
				/*居中对齐*/
				display: inline-block;
				width:80px;//关键部分，决定了 <label>标签的长度达到对齐效果
				height: 40px;
				line-height: 40px;
				text-align: justify;
				text-align-last: justify;
				<!--label{
				/*右对齐*/右对齐方式需要的可以试试
				display: inline-block;
				float: left;
				width: 300px;
				height: 40px;
				text-align: right;-->
			}
    </style>
    <form name="myform" onsubmit="return doSummit()" method="post">
        <label>登陆账号：</label><input type="text" name="uname" onblur="checkUname()"/>6~18位有效字符(字母、数字、下划线)<br/><br/>
        <label>登陆密码：</label><input type="text" name="upassword" onblur="checkPassword()"/>6~18位任意字符<br/><br/>
        <label>重复密码：</label><input type="text" name="rupassword" onblur="checkRpassword()"/>重复密码与登录密码<br/><br/>
        <label>性别：</label><input type="radio" name="usex" value="1"/>男
             <input type="radio" name="usex" value="2"/>女 必须选择一个<br/><br/>
        <label>年龄：</label><input type="text" name="uage" onblur="checkAge()"/>大于0的任意两位整<br/><br/>
        <label>手机号码：</label><input type="text" name="unumber" onblur="checkNumber()"/>由1开头的11位整数<br/><br/>
        <label>邮箱：</label><input type="text" name="uemail" onblur="checkEmail()"/>有效的Email地址<br/><br/>
        <label>学历：</label><select name="education" id="mySelect">
            <option value="1">小学</option>
            <option value="2">初中</option>
            <option value="3">大专</option>
            <option value="4" >本科</option>
            <option value="5">硕士</option>
            <option value="6">研究生</option>
            <option value="7">博士</option>
          </select>必须选择一个学历选项
          <br/><br/>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置"/>
    </form>
</body>
</html>

效果如下
在这里插入图片描述