表单布局浅解

本人以前很喜欢用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;

}

这样表单就建好了。