在很多网站都会有登录注册等页面的表单,表单对齐是不可避免的。其实在这里有一个实用的小技巧,百度,京东,腾讯等大型网站都是这样来实现的。
步骤如下:
- 每一行表单分左右栏,所有左栏和右栏的长度都对应相等。
- 所有左右栏盒子都设置左浮动
- 左栏文字右对齐
- 左栏和右栏总长度等于行宽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
form{
width:320px;
}
p{
overflow:hidden;
}
label{
float:left;
width:60px;
height:40px;
line-height:40px;
text-align: right;
margin-right:10px;
}
input:not(#submit){
float:left;
height:16px;
padding:10px;
border:1px solid silver;
}
#tel,#pwd{
width:228px;
}
#verifyCode{
width:118px;
margin-right:10px;
}
#submit{
width:100px;
height:40px;
border:1px solid gray;
padding:0px;
background-color:silver;
}
</style>
</head>
<body>
<form>
<p>
<label for="tel">手机号</label>
<input id="tel"type="text"/>
</p>
<p>
<label for="pwd">密码</label>
<input id="pwd"type="text"/>
</p>
<p>
<label for="tel">验证码</label>
<input id="verifyCode"type="text"/>
<input id="submit"type="submit"/>
</p>
</form>
</body>
</html>
简而言之就是:分两栏,宽度相等,盒子左浮动,文字右对齐,还有别忘了清除浮动。