实现form表单label字段和input字段的对齐设计，很多人都习惯使用table的方式，当然了，使用table方便很多，只需要设置一下align就可以实现。但是从减少代码量和良好的结构性出发，可以使用其他的方式来实现，下面我将要展示的就是其中的一种方式。
效果：
我的方式是使用div将每个label和input分组，比如：
[html]
<form method="post" action="#">
<div>
<label for="username">User Name:</label><input type="text" id="username" class="txt" />
</div>
<div>
<label for="email">E-mail:</label><input type="text" id="email" class="txt" />
</div>
<div>
<label for="pwd">E-mail:</label><input type="password" id="pwd" class="txt" />
</div>
<div>
<input type="button" value="Submit Now" id="btn" />
</div>
</form>
[/html]
HTML结构已经定义了，接下来就是css的技巧问题了，首先给每个div设置样式：
[css]
div{
clear:left;
margin-bottom:6px;
}
[/css]
之后就是技巧的关键label样式：
[css]
label{
float:left;
width:150px;
}
[/css]
通过设置了label的float样式，再加上设置一下它的width，使得每一个label内的文本都能在一行内显示，这样就使得他们后面的input都能对齐了。浏览效果
即时更新:
经过测试，也可以不使用float的方式来实现上面的效果，关键的还是在label的css样式设置上，设置label的display属性为inline-block，再加上一个合适的width属性，也就实现了简单的对齐效果，在IE6以上版本，FF，Chrome，Opera，Safari测试通过：
[css]
div{
margin-bottom:6px;
}
label{
display:inline-block;
width:150px;
}
[/css]
预览inline-block版的form效果。