html复选框和文字水平对其,input checkbox、radio、button与文字对齐

如果把文字与 checkbox、radio、button 排在一起，它们不对齐，文字总要下一点，看起来有点别扭，有无办法使它们对齐？用 Css 可以实现此目的，不过在使用过程中，可能会遇到一些问题。

如果 Css 定义的 html 标签不对，虽然 Css 是一样，但仍然不能让 checkbox、radio、button 与文字对齐，笔者在实际应用过程中就多次遇到这种情况，故总结出来与大家分享，避免犯类似的错误而浪费时间增加烦恼。

一、input checkbox 与文字对齐

html 代码：

;全选

不加 Css 样式，上面的 checkbox 与文字(全选)并不对齐，“全选”稍微下了一点，效果如下：

全选

对齐 Css 样式：

.SelectAll input{vertical-align:middle; margin-bottom:2px; *margin-bottom:2px;}

引用 Css 后：

;全选

加上 Css 样式后，checkbox 与文字对齐了，效果如下：

全选

注意：Css 要定义 input，如果定义 label，则 checkbox 与文字不一定对齐。

二、input radio 与文字对齐

html 代码：

;是;否

未加 Css 样式时，radio 与“是或否”并没有对齐，它们都稍微靠下一点，效果如下：

是否

对齐 Css 样式：

.radioAlign input{vertical-align:middle; margin-bottom:2px; *margin-bottom:2px;}

引用 Css 后：

;是;否

用 Css 后，radio 与文字已经对齐，效果如下：

是否

三、input button 与文字对齐

html 代码：

;说明

ie8、9 以上版本或火狐浏览器，未加 Css 样式时，button 与文字(说明)已经对齐，但 ie6 却没有对齐，效果如下：

说明

对齐 Css 样式：

.buttonAlign input{vertical-align:middle; margin-bottom:2px; *margin-bottom:2px;}

引用 Css 后：

;说明

用 Css 后，ie6 buttton 也与文字对齐了，效果如下：

说明