表单对齐操作

小小潘不放弃

已于 2022-03-01 15:35:29 修改

阅读量5.4k

点赞数 4

分类专栏： CSS进阶文章标签： css css3 html 前端 web开发

于 2022-02-28 13:30:00 首次发布

本文链接：https://blog.csdn.net/qq_57220516/article/details/123164039

版权

CSS进阶专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在很多网站都会有登录注册等页面的表单，表单对齐是不可避免的。其实在这里有一个实用的小技巧，百度，京东，腾讯等大型网站都是这样来实现的。
步骤如下：

每一行表单分左右栏，所有左栏和右栏的长度都对应相等。
所有左右栏盒子都设置左浮动
左栏文字右对齐
左栏和右栏总长度等于行宽

<!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>