复选框文字对齐显示

最新推荐文章于 2022-09-20 21:43:47 发布

原创最新推荐文章于 2022-09-20 21:43:47 发布 · 1.8w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#input #xhtml #safari #html #生物 #opera

网页制作方面专栏收录该内容

5 篇文章

订阅专栏

本文探讨了在不同浏览器中实现复选框与文字对齐的两种有效方法。一种是通过设置字体家族来统一显示效果；另一种是调整垂直对齐属性及边距。这些技巧有助于提升网页表单的一致性和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近的工作中，有很多表单的制作，很多次都碰到复选框与文字对齐的问题，发现在不同的浏览器中，显示各异，显示效果如下

观察发现，IE6、IE7 显示效果基本相同，算是显示比较正常的效果，IE8、safari 和火狐显示效果基本相同，两个文字都偏下，而opera稍偏下。在之前我的解决方法，都是通过文字外面套上另外的标签，等，通过调整input标签和label的html标签来对齐，大概方法即是让input 和label 标签都左浮动，但前提一定是在写页面的时候，文字外面加了label 标签，这种方法应为定义了大量的浮动，还需要清除浮动，才能保证下面页面的正常显示，或者有些人用相对定位等方法，如果文字外面没有套label标签，更没有其他标签呢？经过查找，发现其实还是有很简单的方法就能解决问题

方法一：如果将font-family中的第一个字体设置为Tahoma，则可以实现对齐(Verdana等字体也可以)。次方法来源与蓝色理想 http://www.blueidea.com/tech/web/2009/6910_3.asp

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>测试vertical-align</title> <style> *{ margin:0; padding:0;} .admin_more{vertical-align:middle} .admin_more input{vertical-align:middle;} body{font-family:tahoma;font-size:12px;} </style> </head> <body> <div class="admin_more" > <input name="" type="checkbox" value="语文" checked="checked" /> 物理 <input name="" type="checkbox" value="数学" /> 化学 <input name="" type="checkbox" value="英语" /> 历史 <input name="" type="checkbox" value="政治" /> 地理 <input name="" type="checkbox" value="生物" /> 生物 <input name="" type="checkbox" value="其他" /> 其他 </div> </body> </html>

如果文字外面有label 标签，只要定义input，label {vertical-align:middle} 即可，

注意：因为单选框或是复选框有外边距，所以需要先去除掉他的外边距。

方法二：定义input 标签vertical-align 属性，调整input 的上下边距，来实现input和文字的水平对齐

.admin_more input{vertical-align: text-bottom; margin-bottom:2px; *margin-bottom:-2px;}

（未完）