input【type="checkbox"】標籤與字體對齊

今天分享一個比較實用的技巧，在實際項目中咱們會常常遇到表單的input標籤多選和單選的問題，可是每每因爲標籤自身的樣式和咱們項目的風格很不搭調，就不能實現了，今天就來告訴你們怎麼去實現吧。

第一種：利用僞類：（開源中國）

須要注意的是：在頁面佈局中，仍是有input【type=checkbox】的：

它的樣式以下所示：

 

 後面就是經過js腳原本控制它去實現了；

第二種：採用圖片

這是一個樹形控件zTree 

注意事項：圖片最好作好兩種狀態圖，而且合併成精靈圖，注意類名的應用，指引入一次，後面的修改background-position: 0 0;就能夠了；

 第三種:下面推薦3種方法實現checkbox/input文本框與文字對齊:

1.使用css實現文本對齊:

<input type="checkbox" class="vat"><label class="vat">這是文字</label>

　　注意:不要隨意加樣式添加在行內,不方便後期的樣式管理.

.vat{vertical-align:top}

　2.使用label中的for屬性對齊

<input type="checkbox" id="more" /> <label for="more">對齊是想要的效果</label>

　3.使用label包裹整個input和文字

<label><input type="radio"/>男</label>

　　參考原博文地址:http://www.cnblogs.com/bubuchu/p/6079862.html