使用jQuery和css对齐表单元素
船长 发表于 2009-03-19 11:38 | 分类：jQuery | 阅读数：1,323 次
使用jQuery和css对齐表单元素，当我们创建一个表单的时候，不可避免要使用label和input元素，例如下图所示：
由于label中文字的长短不一，所以就造成了无法对齐的现象，很不美观。
通过一下两个步骤即可解决这一问题
1、加入一下样式
查看代码 CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 | label, input[type="text"]{ float:left; display:block; } label { margin-right: 5px; } .field{ width:100%; overflow:auto; margin:5px 0px; } |
2、加入以下js代码
查看代码 JAVASCRIPT
1 2 3 4 5 6 7 8 | $(document).ready(function() {
var max = 0;
$("label").each(function(){
if ($(this).width() > max)
max = $(this).width();
});
$("label").width(max);
}); |
当然，需要引入jQuery库，这个很简单，就不说了。
完成以后的效果如图所示：
本站QQ交流群：16524922，一起交流学习，互帮互助
转载请注明出处：http://www.songlecn.com/2009/03/541/
我要评论 标签: css, jQuery, 对齐元素
