checkbox与说明文字无法对齐的问题
程序员文章站
2022-04-28 17:37:18
...
写过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文字对齐)