今天做练习的时候题目要求如上对齐但是我做出来是始终是这样的效果。。。
翻看了很多大佬的讲解,发现其实只需要给文字描述部分加上
<!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>
效果如下