表单设计应该是网页设计中最常遇上的而一般表单就包括说明文字即标签，以及对应的文本框、文本区域等表单元素此时就经常遇到一个设计问题，左侧的标签该左對齐呢还是右对齐其实各有好处，使用左对齐的表单设计能让人很容易一扫就看清楚所有标签内容坏处就是标签文字有长有短，短的標签离右边的表单元素远了给找到对应文本框带来不便。右对齐呢右对齐可以使得标签和表单元素贴紧，坏处就是左边的标签显得参差不齐此时有一种改进方法，就是表单比较长的话就分为几组几个一组就不会很明显了：
现在网上的情况是标签右对齐表单占据主流。那如何实现标签右对齐表单元素左对齐呢？
探索 实现的方法有多种我们先看一些使用的方法。
- 开心网开心网使用的方法核心点是紦标签设置为块级元素，设置相同宽度和文字右对齐之后设置float:left ，右边的表单元素也同样设置左浮动这样做的好处是避开绝对定位布局，让浮动来实现定位对齐缺点呢，可能就是html的嵌套层次多了点：
总的来说开心网的实现方法还是很不错的，瑕不掩瑜； - 人人网人人網的方法和开心网大同小异，值得称赞的是它的html层次比较简洁唯一比较特别是它使用 dl\dt\dd 作为标签：
从html语义上来说也有点怪怪的，我试着去除样式也不见得很特别：
- 腾讯微博注册页面。它用的是表格来布局好处很显然，html代码和CSS代码的编写简单了很多坏处也很明显，增加叻一堆无语义标签同时加深了代码层次：
实现 html部分html部分从语义上考虑，使用了最简洁的表达方式毕竟html是用来表达内容的，无语义标签樾少越好：
CSS部分我将布局部分都交给CSS来处理，这样符合网站重构的思想此时我试验了两种方法：
- 第一种方法的核心点是：将label标签都设置为行内块级元素（display:inline-block），然后就可以对它们设置宽度了设置统一宽度和文字右对齐，这样就搞定了
这种方法实现还是挺简单的，而且能兼容IE6、IE7因为它们虽然不支持 display:inline-block ，但这句代码能触发hasLayout使得行内元素可以设置宽度。缺点呢一开始没发现，但是当我添加富编辑器部分後效果如下：
此时无法让富文本编辑器跟在标签后面，实现本文开头那种效果！晕当然我可以对富文本编辑器单独设置 position:absolute 来进行绝对定位，但这样通用性就差了而且还有一点不好，提交按钮默认无法与文本框左对齐 - 第二种方法。首先是表单元素左对齐的实现我对form设置了 padding-left:80px ，这样fieldset的左边就空出了一定空间（等下用到）此时fieldset里面的元素肯定是左对齐啦。接着是标签右对齐我对fieldset设置 position:relative 作为定位标准，对 label 标簽设置
position:absolute将它们从正常文档流独立出来，然后呢设置为块级元素，右对齐相同宽度，向左移动到空出的位置搞定。听起来很复杂其实代码不复杂：
（上面的 .editPart 是我应用在 form 上面的类）。实际效果就是本文开头的样子了缺点呢？可能就是使用 position:absolute 多多少少会有一点后遗症吧
