checkbox與解說文字無法對齊的問題

標籤：style   blog   http   os   ar   sp   div   art   問題   

寫過Web頁面的朋友大概都曾遇到過這樣的問題：checkbox與解說文字（比如一個label標籤或一個a標籤）無法對齊，要不是checkbox上浮了，要不是解說文字上浮。 

 

以前遇到過這個問題，但是都直接忽視，並未深究。今天要解決項目中遺留下的介面顯示問題，這個問題終於繞不過去了，因為它真的是無處不在。

 

今天，藉助於偉大的google，同時自己不斷實驗，終於解決了這個“老大難”的“曆史遺留問題”。現將經驗分享如下：

其實很簡單，真的灰常簡單，把要對齊的每個標籤，都加一個css屬性：

Html代碼  

1. vertical-align:middle;  

 

 

比如說我有一個checkbox，後面跟一個超連結，原來的HTML代碼是這樣的：

Html代碼  

1. <input type=checkbox id="the_id" name=checkbox style="vertical-align:middle;" />  
2. <a href="the_link" title="the_title" ></a>  

 

原來的：

 

 

修改之後是這樣的：

Html代碼  

1. <input type=checkbox id="theId" name=checkbox style="vertical-align:middle;" />  
2. <a href="the_link" title="the_title" style="vertical-align:middle;" ></a>  

 

效果

 

這篇文章有針對此類問題的詳細分析：

表單元素與提示文字無法對齊的問題(input,checkbox文字對齊）

 

checkbox與解說文字無法對齊的問題