西红柿炒番茄

实现form表单label字段和input字段的对齐设计，很多人都习惯使用table的方式，当然了，使用table方便很多，只需要设置一下align就可以实现。但是从减少代码量和良好的结构性出发，可以使用其他的方式来实现，下面我将要展示的就是其中的一种方式。
效果：

我的方式是使用div将每个label和input分组，比如：

<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结构已经定义了，接下来就是css的技巧问题了，首先给每个div设置样式：

div{
	clear:left;
	margin-bottom:6px;
}

之后就是技巧的关键label样式：

label{
	float:left;
	width:150px;
}

通过设置了label的float样式，再加上设置一下它的width，使得每一个label内的文本都能在一行内显示，这样就使得他们后面的input都能对齐了。浏览效果

即时更新:

经过测试，也可以不使用float的方式来实现上面的效果，关键的还是在label的css样式设置上，设置label的display属性为inline-block，再加上一个合适的width属性，也就实现了简单的对齐效果，在IE6以上版本，FF，Chrome，Opera，Safari测试通过：

div{
	margin-bottom:6px;
}
label{
	display:inline-block;
	width:150px;
}

预览inline-block版的form效果。