表单元素与文字对不齐的解决方案

我们在设计网页表单时,往往会发现一些表单元素无法与文字对齐,如复选框(checkbox)和单选框(radio)等等。如果你在多种浏览器上进行测试,应该会发现各种各样对不齐的情况,本文园子将重点探讨表单元素与文字对不齐的解决方案

声明:本文的代码与图片均来源于蓝色理想,园子仅分享下,版权归原作者所有。

事实上很多网站在这方面做的都有所欠缺,多数都出现在内页里面,可能设计者也不太注重内页面的表现了吧,来看看截图:

多数网站的表单与文字并没有对齐

多数网站的表单与文字并没有对齐

解决以上问题需要两步:

1.设置元素的对齐属性为:vertical-align:middle 。

我们有必要来了解下 vertical-align:middle 这个属性,其实vertical-align:middle 就是该元素的中心对齐周围元素的中心。这里“中心”的定义是:图片当然就是height的一半的位置,而文字应该是基于baseline往上移动0.5ex,亦即小写字母“x”的正中心。但是很多浏览器往往把ex这个单位定义为0.5em,以至于其实不一定是x的正中心。

你可能会发现即使设置了vertical-align:middle这个属性,也会出现些偏差。那就需要进行第二步了。

2.设置字体为 Tahoma,设置所有元素的填充与边距为0。

我们需要将出现表单元素的字体设置为 Tahoma,并且把所有元素的填充与边距设置为0。这样的话就可以完美实现对齐了,并且测试在FF3.5/IE6/IE7/IE8和Chrome中均显示正常。

CSS代码如下:

*{margin:0;}
label{vertical-align:middle}
.inputcheckbox{vertical-align:middle;}
body{font-family:tahoma;font-size:12px;}

HTML代码:



大家可以自行测试下。

常用的表单元素与文字排版方式(仅供参考)

下面是一些常用表单元素与文字混排的代码,均完美实现了表单元素与文字的对齐,希望对朋友们有所帮助。先看效果:

网页中常用的表单元素实例

网页中常用的表单元素实例

CSS代码:

*{margin:0;}
label{vertical-align:middle}
.inputcheckbox{vertical-align:middle;}
body{font-family:tahoma;font-size:12px;}

HTML代码:











表单元素与文字对不齐的解决方案》上有23条评论

发表评论