表单布局浅解

本人以前很喜欢用table 构建提交表单。后来用着用着发现。如果用table构建表单。如果表单如果需要加效果是比较麻烦。而且图片与文字需要对齐时更是让人痛不欲生。

今天闲来无事查看了下淘宝、百度等。发现他们的表单基本上都是用div或者P构建。可扩展性、兼容性都比较靠谱特写下如下实现思路。

1、将表单用于容器括起来。如果（from、div）的。

2、每一行定义个行类（如：.form-item）。

/*清除浮动。*/

.form-item::after {

     clear : both ;

     content : "" ;

     display : block ;

     height : 0 ;

     visibility : hidden ;

}
/*设置行高和laber宽度

.form-item {

     line-height : 36px ;

     padding : 10px 0 10px 260px ;

}

3、添加内部标签（如：.form-label）

--内部文字部分。

.form-item .form-label {

     display : inline ;

     float : left ;

     height : 37px ;

     line-height : 37px ;

     margin-left : -260px ;

     text-align : right ;

     width : 240px ;

}

这样表单就建好了。