表单设计应该是网页设计中最常遇上的，而一般表单就包括说明文字即标签，以及对应的文本框、文本区域等表单元素。此时就经常遇到一个设计问题，左侧的标签该左对齐呢还是右对齐？其实各有好处，使用左对齐的表单设计能让人很容易一扫就看清楚所有标签内容，坏处就是标签文字有长有短，短的标签离右边的表单元素远了，给找到对应文本框带来不便。右对齐呢，右对齐可以使得标签和表单元素贴紧，坏处就是左边的标签显得参差不齐。此时有一种改进方法，就是表单比较长的话就分为几组，几个一组就不会很明显了：
现在网上的情况是标签右对齐表单占据主流。那如何实现标签右对齐，表单元素左对齐呢？

探索

  1. 开心网。开心网使用的方法核心点是把标签设置为块级元素，设置相同宽度和文字右对齐，之后设置float:left ，右边的表单元素也同样设置左浮动。这样做的好处是避开绝对定位布局，让浮动来实现定位对齐。缺点呢，可能就是html的嵌套层次多了点：
    总的来说，开心网的实现方法还是很不错的，瑕不掩瑜；
  2. 人人网。人人网的方法和开心网大同小异，值得称赞的是它的html层次比较简洁。唯一比较特别是它使用 dl\dt\dd 作为标签：
    从html语义上来说也有点怪怪的，我试着去除样式，也不见得很特别：
  3. 腾讯微博注册页面。它用的是表格来布局，好处很显然，html代码和CSS代码的编写简单了很多，坏处也很明显，增加了一堆无语义标签同时加深了代码层次：

实现

<form class="editPart">
<fieldset>
<legend>评论</legend>
<p><label>昵称</label><input type="text" class="commentInput" tabindex=1 /></p>
<p><label>邮箱</label><input type="text" class="commentInput" tabindex=2 /></p>
<p><label>评论内容</label>

<div class="lightEditor">
<p class="editor-toolbar">
<input type="button" class="editor-toolbar-button fb btnActive" title="粗体" value="B" /><input type="button" class="editor-toolbar-button fi" title="斜体" value="I" /><input type="button" class="editor-toolbar-button unl" title="下划线" value="U" />
</p>
<iframe id="myFrame" class="editorFrame" style="height:162px;" frameborder="0px" tabindex=3></iframe>
</div>

</p>
<input type="submit" class="commentSubmit" value="提交" />
</fieldset>
</form>

CSS部分。我将布局部分都交给CSS来处理，这样符合网站重构的思想。此时我试验了两种方法：

  1. 第一种方法的核心点是：将label标签都设置为行内块级元素（display:inline-block），然后就可以对它们设置宽度了，设置统一宽度和文字右对齐，这样就搞定了。
    这种方法实现还是挺简单的，而且能兼容IE6、IE7，因为它们虽然不支持 display:inline-block ，但这句代码能触发hasLayout，使得行内元素可以设置宽度。缺点呢？一开始没发现，但是当我添加富编辑器部分后，效果如下：
    此时无法让富文本编辑器跟在标签后面，实现本文开头那种效果！晕，当然我可以对富文本编辑器单独设置 position:absolute 来进行绝对定位，但这样通用性就差了。而且还有一点不好，提交按钮默认无法与文本框左对齐。
  2. 第二种方法。首先是表单元素左对齐的实现，我对form设置了 padding-left:80px ，这样fieldset的左边就空出了一定空间（等下用到）。此时fieldset里面的元素肯定是左对齐啦。接着是标签右对齐，我对fieldset设置 position:relative 作为定位标准，对 label 标签设置 position:absolute，将它们从正常文档流独立出来，然后呢，设置为块级元素，右对齐，相同宽度，向左移动到空出的位置，搞定。听起来很复杂，其实代码不复杂：
.editPart{padding:10px 15px 15px 80px;}
.editPart fieldset{position:relative;border:0}
/*.editPart label{display:inline-block;width:60px;text-align:right}*/
.editPart label{position:absolute;left:-72px;width:60px;text-align:right;margin-top:5px}