解決checkbox與對應文字不對齊的問題

最近公司比較忙，所以一直在趕項目，很久沒有更新博客了。

剛才在工作中又遇到了一個問題，下面我來分享一下吧(｡･∀･)ﾉﾞ

問題所在

我寫了一個input，他的類型是checkbox，在他的后面接着label標簽進行描述。

 

html如下：

<input type="checkbox" checked="checked" name="sign" id="sign"/>
<label for="sign">我已閱讀並確認**產品服務協議</label>

 

可是顯示出來的效果可不如我所想Σ(っ °Д °;)っ，checkbox和label的文字並沒有對齊（我想大家也經常遇到這種問題吧），我得想辦法搞定它！

如何解決

我想了一想，試了又試，最后得出了解決方案~

來！我們看代碼！(●'◡'●)

調整input元素的css

css:

　　#sign{

　　　　display: inline-block;
　　　　vertical-align: middle;
　　　　margin-bottom: 2px;

　　}

運用改變input的元素類型，設置垂直居中，然后再墊2px的margin!完美！(●'◡'●)

label怎么用？什么意思？

<label> 標簽為 input 元素定義標注（標記）。

label 元素不會向用戶呈現任何特殊效果。不過，它為鼠標用戶改進了可用性。如果您在 label 元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。

<label> 標簽的 for 屬性應當與相關元素的 id 屬性相同。

以上都是W3C上的原話，做一個安靜的搬運工(ˉ▽ˉ；)...

簡單來說就是點擊label，會聚焦到label for的id元素，以我上面的代碼為例子，點擊“我已閱讀並確認**產品服務協議”的文字，那么對應id的checkbox的小勾勾會勾上，相當於點擊了checkbox的效果，這樣就提高了我們的用戶體驗，不用去點那個細小的小框框了。

希望這篇能在你需要它的時候提供一點小小的幫助。