新浪采用的是在input外嵌套相对定位的div标签，这里直接相对定位并左浮动label标签，input标签相对label绝对定位。
height==line-height时，默认情况下文字并不是绝对垂直居中的：height、line-height同为偶数时上下相差3px，同为奇数时上下相差2px。要达到绝对居中height应为奇数，此时line-height=height+2px，IE7&FF中文字绝对居中。IE6下需设置overflow:hidden。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>水平对齐的表单 www.etosun.cn</title>
<style type="text/css">
* {margin:0px;padding:0px;}
body {font:12px "宋体";}
.myform {margin:100px auto 0 auto;padding-left:10px;width:490px;height:29px;line-height:31px;overflow:hidden;background:#FFFF00;}
label {position:relative;float:left;width:145px;}
.myform input {position:absolute;}
.uname input, .pw input, .check input{width:80px;top:5px;height:15px;line-height:15px;}
.uname {width:150px;}
.uname input {left:55px;}
.pw {width:140px;}
.pw input {left:45px;}
.check {width:120px;}
.check input{left:55px;width:40px;}
.botton {width:70px;}
.botton input {top:5px;width:61px;height:19px;}
</style>
</head>
<body >
<div class="myform">
<form>
<label class="uname">用户名：<input type="text" name="uname" /></label>
<label class="pw">密码：<input type="password" name="pw" /></label>
<label class="check">验证码：<input type="text" name="check" /></label>
<label class="botton" ><input type="image" name="imageField" id="imageField" src="button.gif" />
</label>
</form>
</div>
</body>
</html>
« 上一篇：师傅，等等我！
标准浏览器下父容器高度自适应：下一篇 »
