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

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

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

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

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

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

实现  html部分。html部分从语义上考虑，使用了最简洁