本人以前很喜欢用table 构建提交表单。后来用着用着发现。如果用table构建表单。如果表单如果需要加效果是比较麻烦。而且图片与文字需要对齐时更是让人痛不欲生。
今天闲来无事查看了下淘宝、百度等。发现他们的表单基本上都是用div或者P构建。可扩展性、兼容性都比较靠谱特写下如下实现思路。
1、将表单用于容器括起来。如果（from、div）的。
2、每一行定义个行类（如：.form-item）。
/*清除浮动。*/
.form-item::after {
clear:
both;
content:
"";
display:
block;
height:
0;
visibility:
hidden;
}
/*设置行高和laber宽度
/*设置行高和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;
}
这样表单就建好了。
扫一扫
617
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
