input checkbox、radio、button与文字对齐

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

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

 

　　一、input checkbox 与文字对齐

　　html 代码：

　　<div>
　　　　</input type="checkbox" id="cb" value="0" />;<label for="cb">全选</label>
　　</div>

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

　　对齐 Css 样式：

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

 

　　引用 Css 后：

　　<div class="SelectAll">
　　　　</input type="checkbox" id="cb" value="0" />;<label for="cb">全选</label>
　　</div>

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

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

 

 

　　二、input radio 与文字对齐

　　html 代码：

　　<div>
　　　　</input type="radio" id="rad1" value="0" />;<label for="rad1">是</label></input type="radio" id="rad2" value="0"/>;<label for="rad2">否</label>
　　</div>

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

　　对齐 Css 样式：

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

 

　　引用 Css 后：

　　<div class="radioAlign">
　　　　</input type="radio" id="rad1" value="0" />;<label for="rad1">是</label></input type="radio" id="rad2" value="1"/>;<label for="rad2">否</label>
　　</div>

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

 

 

　　三、input button 与文字对齐

　　html 代码：

　　<div>
　　　　</input type="button" id="btn" value=" 提 交 " />;<label for="btn">说明</label>
　　</div>

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

　　对齐 Css 样式：

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

 

　　引用 Css 后：

　　<div class="buttonAlign">
　　　　</input type="button" id="btn" value=" 提 交 " />;<label for="btn">说明</label>
　　</div>

 

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