label标签与input标签的对齐问题

如果要实现上面这种对齐效果,直接拉到文章底,反正我会说一堆废话.jpg
在这里使用的是嵌套格式:

<label>Text<input/></label>

而非通常的for+id的方法:

<label for="input">Text</label><input id="input"/>

虽然查到的帖子都非常推崇第二种for+id的方法,但是在这里个人认为还是第一种嵌套关系更符合逻辑.

label标签在hover时会让其内部的第一个input标签同样产生hover的样式,这一点在input标签的type="number"时更加明显;(input末端会出现调整数字的上下箭头)
如果label标签设置了for属性,则会让被选中的input标签产生hover效果,无论该标签是否在label内,同时所有其他被嵌套在label内的input都不会产生hover效果;

label标签在被点击时会让其内部的第一个input标签获得焦点,无论label内有多少个input标签,都会使第一个获得焦点;
当然,如果label标签设置了for属性,则会让被选中的input标签获得焦点,无论该标签是否在label内.
在这里有一个非常有趣的现象:
如果一个label内嵌了一个input但是for了另一个input…
比如这样:

<label id="A" for="C">Text
		<input id="B"/>
</label>
<input id="C" />

或者这样:

<label id="A" for="C">Text
		<input id="B"/>
		<input id="C" />
</label>

在Chrome下的效果
在第一种嵌套关系下,label A发生hover时,理所当然的会让关联的input C发生hover,而input B发生hover时,嵌套他的label A同样会获得hover的效果,而label A会带着他for的input C一起产生hover效果,最终达到ABC都发生hover效果的诡异样式;
但是input C发生hover时A与B不会有任何效果;
在第二种嵌套关系下,label A与input B发生hover时的效果不变,但是当input C发生hover时,关联他的label A同样会产生hover效果,而input B不会有任何事.
Edge:
两种嵌套关系产生的hover效果与Chrome大致相同(主要是A&C的效果)
而在Edge下,第一种嵌套关系下,input B发生hover时,label A也会产生hover效果,但是input C不会发生任何事.
IE(9):
基本同Edge.
Firefox&Opera:
没有,谁爱测谁测.
以上只会针对css样式发生效果,而jQuery的hover()事件不会有任何问题

不知不觉讲了这么多废话,接下来是重点:

label嵌套input时的对齐问题:

label嵌套input时本身不会发生任何问题,主要是就二者使用的宽高以及占比对齐等问题.
先说input:
input是行内元素,display默认为inline-block,可以设置宽高,但是无法更改他的display为inline来让他自适应内容或者填充父元素.
拥有width属性,但是只有type字段为image时才会有效,这时特性有些像img标签.

label是行内元素,display默认为inline,无法设置宽高,如果父元素允许,他会根据子元素来自动调整宽但不调整高
子元素input会超出他的高度并且去从label的父级元素中侵占高度,label的overflow无效

如果label的父元素设置了宽但是不足够label内容(label内文字)及其内部input使用的话,更简单了—
input会直接换行
就像其他的行内元素一样.
之后的高度宽度超界问题就交给label的父级去处理overflow了

那么,要如何让label和input能按照自己的意图去使用占比宽度或者固定宽来对齐呢?
当然你可以把label变成inline-block,给他设置一个固定宽高,在之后跟上一个input
但是个人比较推崇本文开头所说的<label><input/></label>这样的嵌套格式,所以就有了第二种办法:
label内嵌一个inline-block的行内元素+一个input
这样就可以通过设置inline-block的行内元素和input的百分比或者固定宽高来达到理想的效果
而且可以联系之前的label和input的hover联系来使用好看的样式而不用一个个设置for
比如这样:

label{
	display:inline-block;
	width:100px;
}
label:hover{
	border-style: solid none solid solid;
	border-width: 1px;
}
input:hover{
	border-style: none solid none none;
	border-width: 1px;
}
label abbr{
	display: inline-block;
	width: 29px;
	text-decoration:none;
}
input{
	width: 69px;
}

<label><abbr>XXX:</abbr><input /></label>

效果图:


这篇没什么用的文章到此就结束了,
但是这是我写的第一篇博客,还是挺开心的.
要问为什么写…
因为我在网上寻找label和input对齐时看到了很多label连着input然后加个for的写法,
但是我觉得label嵌套input更棒…