CSS：标签右对齐，文本框左对齐的实现

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

现在网上的情况是标签右对齐表单占据主流。那如何实现标签右对齐，表单元素左对齐呢？

探索   实现的方法有多种，我们先看一些主流网站使用的方法。

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

各个网站的实现各有优劣，但如果从减少嵌套层次和语义上说，没有很满足我要求的方法。于是我打算自己写。

实现  html部分。html部分从语义上考虑，使用了最简洁的表达方式，毕竟html是用来表达内容的，无语义标签越少越好：

<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}

   （上面的 .editPart 是我应用在 form 上面的类）。实际效果就是本文开头的样子了。缺点呢？可能就是使用 position:absolute 多多少少会有一点后遗症吧。

总结   写本文，我并不是想强调我的方法就比别的主流网站的方法好，见仁见智吧。只是我认为我的方法更符合网站重构的思想多一点。另一个目的，就是感慨，前端开发这一部分很多时候对同一问题我们可以有多种解法，充满了未知性和探索的乐趣，这也是我喜欢前段的原因吧。如果想要看到完整的代码样式，可以到我的个人首页​，打开右边的留言功能，审查表单元素（注：直接查看源代码什么都看不到，要用chrome、IE等的开发人员工具才行）

转载于:https://www.cnblogs.com/weberpan/archive/2011/10/07/2200333.html