当前位置:园子博客 » 网站应用 » 表单元素与文字对不齐的解决方案

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

1月 19th, 2010 | Filed under 网站应用 | 共有9,351次浏览

我们在设计网页表单时,往往会发现一些表单元素无法与文字对齐,如复选框(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代码如下:

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

HTML代码:

1
2
<input class="inputcheckbox" name="test" value="1" type="checkbox">
<label>测试文字x</label>

大家可以自行测试下。

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

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

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

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

CSS代码:

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

HTML代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<input class="inputcheckbox" name="test" value="1" type="checkbox">
<label>测试文字x</label>
<br/><br/>
<input class="inputcheckbox " name="test2" value="2" type="radio">
<label>测试文字x</label>
<br/><br/>
<input class="inputcheckbox " name="Text1" type="text" />
<label>文字</label>
<input  class="inputcheckbox " name="Text1" type="text" />
<label>文字</label>
<br/><br/>
<label>测试文字</label>
<input   class="inputcheckbox " name="Button1" type="button" value="按钮" />
<br/><br/>
<select class="inputcheckbox " name="Select1">
<option>测试文字</option>
</select>
<label>测试文字</label>
  1. 西楚博客
    7月 15th, 201117:14

    我不是来打酱油的,我是来学习的!

  2. 大敏
    1月 26th, 201008:29

    感觉,博客的导航。一下子英文,一下子中文的不美观。!

  3. 小辉网
    1月 25th, 201019:01

    很好很强大。

  4. 吖Bee
    1月 24th, 201017:43

    这个东西很有用,我要专研一下!

  5. Hobo
    1月 23rd, 201012:47

    恩,很好的解决办法,一个细节的小问题,但是却很让人头痛

  6. 梵婗 Fanny Lawren
    1月 22nd, 201008:28

    博主對美很有要求啊,真難得。

  7. 乘风归来兮
    1月 21st, 201020:43

    园子这好东西不少好好好学习

  8. 卢松松
    1月 21st, 201015:31

    目前用不上

  9. 天光土木在线
    1月 21st, 201010:46

    好好学习哦!

  10. 1月 20th, 201022:53

    很少看到你玩代码哦。

  11. 妮裳神话
    1月 20th, 201017:34

    打开了你的博客,我舍不得关,又来占个位置 ,嘿嘿!

  12. 笨笨
    1月 20th, 201007:31

    嘿嘿来者都是学习者,谢谢分享心得。

  13. 疾风
    1月 20th, 201001:16

    字体改成tahoma那不是和其他字体不统一了

  14. diyidu
    1月 19th, 201023:38

    园子博客已收录至我的“独立博客推介”,特此告知,呵呵。
    查看地址:http://www.diyidu.cn/nav/

  15. 抚顺房产
    1月 19th, 201022:49

    真要好好学习了

  16. TONY
    1月 19th, 201020:14

    送IP送GG走人!!!! :mrgreen:

  17. 征途牛仔
    1月 19th, 201019:41

    带回去我 慢慢学习研究! 😆

  18. A.shun
    1月 19th, 201019:27

    现在很多网站没有注意这些细节

  19. 风云春秋博客
    1月 19th, 201017:18

    学习了 你们这么牛淫们 都是设计网页高手

  20. 北街
    1月 19th, 201017:17

    学些了,原来表格和CSS可以这样完美的结合~呵呵

  21. GEZ鸽子
    1月 19th, 201017:04

    学习了!

  22. 妮裳神话
    1月 19th, 201016:38

    嘿嘿!我坐到沙发了哦!

您必须在 登录 后才能发布评论.