If you create a simple web form like in the example below:
Usually, to make the all labels have the same width,you would set the width of labels to some number, let's say
100px. But, let's do another thing. Let's calculate the width of a
largest label and apply it to all labels. jQuery function below does
exactly what I wrote:
$(document).ready(function() {
var max = 0;
$("label").each(function(){
if ($(this).width() > max)
max = $(this).width();
});
$("label").width(max);
});
And visually it looks like this:
html source code:
<fieldset class="form_registro">
<label>name</label><input id="name" name="name" type="text" /><br/>
<label>Email Address</label><input id="email" name="email" type="text" /><br/>
</fieldset>
参:http://www.jankoatwarpspeed.com/post/2008/07/09/Justify-elements-using-jQuery-and-CSS.aspx
- 大小: 2.1 KB
- 大小: 2.3 KB
分享到:
相关推荐
To designers, engineers and product... Yet, in spite of the obvious value, it may not be clear how to convince the management and accounting departments that the benefits justify the capital expenditure.
证明合法 js 插件来对齐容器内的元素,基本上它会尝试改变元素的宽度,以便每一行填充整个宽度
flex布局 justify-content 解决最后一排数量不够自动向两端排列问题,简单,高效,好用。
justify_4.14.0.zip
资源分类:Python库 所属语言:Python 资源全名:justify-0.3-py3-none-any.whl 资源来源:官方 安装方法:https://lanzao.blog.csdn.net/article/details/101784059
storing, and retrieving free-form shapes drawn using a mouse. Chapter 9, Exchanging Inkscape SVG Drawings with Tkinter Shapes: This chapter shows in detail how to use the Inkscape drawing tool to ...
jquery插件实现仪表盘 jquery插件实现仪表盘,供... justify-content:center; align-items:center; position: relative; } .bp{ border-radius:50% ; border: 1px solid lightgray; position:relative; disp
This section will be valuable to anyone who needs to justify the use of microser‐ vices within their organization and provide some background on how other organizations have started on this journey....
jquery 步骤进度轴插件的实现代码 每天一个jquery插件-步骤进度轴 步骤进度轴 很多工具型的网站入门教程或者注册账号走流程的时候会有这个结构存在,所以... justify-content: center; align-items: center; }
These reasons justify the presence of this book. I have tried to pack the most useful tricks which can enhance your documents’ content in a concise way. The aim is not to teach LATEX programming, but...
Then, they have to use critical thinking techniques to justify their insights and reasoning. They should pivot their efforts to keep their insights aligned with business value. Finally, your team ...
Justify Justify 是一个实现元素两端自适应对齐、均分宽度布局的javascript控件。控件对最后一行对齐做了处理,使最后一行的元素能居左依次与上一行的元素垂直对齐,并支持去除部分DOCTYPE下最后一行产生的空隙。...
AC Justify Left Sel - Left-justify selection AC Justify Center HSel - Center-justify horizontally AC Justify Right Sel - Right-justify AC Justify Block HSel - Block-justify horizontally AC Justify Top...
1. Write the DDL statements to create the two tables using the CREATE TABLE statement. Be sure to identify your primary keys and alternate keys in the statement. 2. Write the INSERT statements to ...
Justify只需单击一下即可使文本更易于阅读! 如果您习惯于在学术期刊上阅读有正当理由的文章,通常很难适应许多网站上出现的无正当理由的文章。 通过此扩展程序,您可以通过单击图标或通过键盘快捷键(在Windows上为...
证明合法使用自定义宽度和字符向左或向右(或两者)对齐文本用法 var justify = require ( 'justify' ) ;justify ( 'foo' , 'bar' , 10 ) ;// => "foo bar"justify ( 'foo' , 'bar' , 15 ) ;// => "foo bar" 您也...
自制的基于Jquery的在线编辑器插件,仿Office2003界面,欢迎使用和指正。 完全开源,欢迎在此基础上修改完善或是增加新功能,共同完善此插件。 目前版本已经实现的功能包括:"Redo","Undo","Bold","Italic",...
relatively minor—more than a service pack, but not enough to justify an entirely new version. However, as you read this book, we think you will find that there are a lot of exciting enhancements ...
对于text-align 我们再熟悉不过了,可是它有个justify属性,平时很少用到,就鲜为人知了。justify是一种文本靠两边布局方式,一般应用于书刊杂志排版;合理运用text-align:justify 有时会省去很多开发的时间,通过...
父元素属性之 justify-content justify-content:设置主轴上子元素的排列方式 justify-content 的属性值如下: 属性值 含义 flex-start 从主轴的头部开始排,主轴:x轴 左对齐;y轴 顶部对齐(默 认值) ...