用表格给表单定位

我们经常在使用表单的时候容易由于前面的提示文字的宽度不一样而导致后面的表达无法对齐，像下面这种情况：

 

<div>姓名：<input type="text" value="" /></div>
<div>性别：<input type="text" value="" /></div>
<div>手机/固话：<input type="text" value="" /></div>

 

姓名：

性别：

手机/固话：

 

大家也可能有像我一样，当初使用 占位符来使得表单对齐，作为一名前端不提倡使用 这种方法。

使用表格可以轻易搞定表单错位的问题，而且浏览器兼容性依也好。

 

<table>
<tbody>
<tr>
<td>性别:</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>性别:</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>手机/固话:</td>
<td><input type="text" /></td>
</tr>
</tbody>
</table>

 

性别:
性别:
手机/固话:

 

旨在说明原理，样式请大家忽略^^