checkbox与说明文字无法对齐的问题

写过Web页面的朋友大概都曾遇到过这样的问题：checkbox与说明文字（比如一个label标签或一个a标签）无法对齐，要不是checkbox上浮了，要不是说明文字上浮。 

 

以前遇到过这个问题，但是都直接忽视，并未深究。今天要解决项目中遗留下的界面显示问题，这个问题终于绕不过去了，因为它真的是无处不在。

 

今天，借助于伟大的google，同时自己不断试验，终于解决了这个“老大难”的“历史遗留问题”。现将经验分享如下：

其实很简单，真的灰常简单，把要对齐的每个标签，都加一个css属性：

vertical-align:middle;

 

 

比如说我有一个checkbox，后面跟一个超链接，原来的HTML代码是这样的：

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

 

原来的效果图：

 

 

修改之后是这样的：

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

 

效果如图：

 

这篇文章有针对此类问题的详细分析：

表单元素与提示文字无法对齐的问题(input,checkbox文字对齐）

 

 

评论

4 楼 niegood 2016-06-12  

谢了，历史难题解决了

3 楼 小林java 2013-06-27  

2 楼 njl_041x 2011-12-05  

<label for="Checkbox1"><input id="Checkbox1" type="checkbox" />北京</label>

劳教楼主帮我把这种结果的对齐一下。
我的邮箱：[e-mail]
先谢过了！

1 楼 njl_041x 2011-12-05  

感觉还是有一个像素的差距。。。