这几天在做表单时总会碰到复选框(checkbox)和单选框(radio)与文字不对齐的问题，要不是checkbox上浮了，要不是文字上浮。在前端开发过程中，单(复)选框和它们后面的提示文字在不进行任何设置的情况下，是无法对齐的，而且在Firefox和IE中相差甚大。即使设置了vertical-align:middle，也依然不能完美对齐。

解决办法：
1、文字大小必须是偶数，比如12PX。
2、将文字加上label标签并且也添加vertical-align:middle样式。
3、然后去除表单元素的边距。

案例：

<!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/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>测试vertical-align</title>

    <style>

        *{margin:0;}

        label{vertical-align:middle}

        .inputcheckbox{vertical-align:middle;}

        body{font-family:tahoma;font-size:12px;}

    </style>

</head>

<body>

        <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>

</body>

</html>

文字和表单（checkbox/radio）元素垂直对齐方法，兼容Firefox和IE。的更多相关文章

  1. HTML表单之input元素的23种type类型

    摘自:http://www.cnblogs.com/xiaohuochai/p/5179909.html 了解HTML表单之input元素的23种type类型 随着HTML5的出现,input元素新增 ...

  2. 了解HTML表单之form元素

    前面的话 表单是网页与用户的交互工具,由一个<form>元素作为容器构成,封装其他任何数量的表单控件,还有其他任何<body>元素里可用的标签 表单能够包含<input& ...

  3. 如何disabled禁用所有表单input输入框元素

    转载地址:https://www.zhangxinxu.com/wordpress/?p=8568 一.pointer-events:none和覆盖层方法的问题 经常会遇到需求,需要禁用div中或者f ...

  4. asp.net.mvc 中form表单提交控制器的2种方法和控制器接收页面提交数据的4种方法

    MVC中表单form是怎样提交? 控制器Controller是怎样接收的? 1..cshtml 页面form提交 (1)普通方式的的提交

  5. 【CSS学习】--- 文本水平对齐属性text-align和元素垂直对齐属性vertical-align

    一.文本水平对齐属性---text-align text-align属性是将块级标签以及单元格里面的内容进行相应的对齐,块级标签里的内联元素会被整体进行移动,而子块级元素或子单元格则会继承父元素的te ...

  6. jquery validate表单验证插件的基本使用方法及功能拓展

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.    1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提 ...

  7. jQuery Validate 表单验证插件----自定义一个验证方法

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...

  8. javaweb action无法跳转、表单无法跳转的解决方法

    action无法跳转,表单无法跳转的解决方法 刚在网上搜索了一下,发现我的这篇文章已被非常多人转载了去其他站点.暗爽,只是还是希望大家注明出处. 顺便说明一下.下面是在struts2中通过測试的 ac ...

  9. jQuery实现form表单基于ajax无刷新提交方法详解

    本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC &quo ...

随机推荐

  1. BZOJ1271: [BeiJingWc2008]秦腾与教学评估

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1271 题解: 这种题真是太神了! 只需要考虑被覆盖的次数的奇偶性,并且保证满足题意的点至多只有 ...

  2. -_-#【邮件】qq邮箱不显示图片

    干货分享之邮件营销QQ邮箱IP白名单服务申请

  3. java基础（五）

    这里有我之前上课总结的一些知识点以及代码大部分是老师讲的笔记 个人认为是非常好的,,也是比较经典的内容,真诚的希望这些对于那些想学习的人有所帮助! 由于代码是分模块的上传非常的不便.也比较多,讲的也是 ...

  4. 折腾iPhone的生活——设置“查找我的iPhone”，让iPhone更防盗

    对于iPhone,防盗一直是一个非常那啥的话题,很多买过iPhone的人都被偷过,但疼,然而苹果也看到了这个问题,所以在iOS7,我们终于看到了一个比较靠谱的防盗软件:查找我的iPhone 之前小偷解 ...

  5. poj 1064 Cable master【浮点型二分查找】

    Cable master Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 29554   Accepted: 6247 Des ...

  6. sonarQube 管理

    sonarQube是一个管理代码质量的开放平台,它可以从七个维度检测和扫描代码质量 参考百度文库:http://wenku.baidu.com/view/cba28af9b90d6c85ed3ac67 ...

  7. BFS-hdu-4101-Ali and Baba

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4101 题目大意: 给一个矩阵,0表示空的可走,-1宝藏的位置(只有一个),其余的正整数表示该位置石头 ...

  8. 关于verilog中if与case语句不完整产生锁存器的问题 分类： FPGA 2014-11-08 17:39 260人阅读 评论(0) 收藏

    在很多地方都能看到,verilog中if与case语句必须完整,即if要加上else,case后要加上default语句,以防止锁存器的发生,接下来就来说说其中原因. 一,什么是锁存器?锁存器与触发器 ...

  9. Android 颜色渲染(三) Shader颜色渲染

    版权声明:本文为博主原创文章,未经博主允许不得转载. 相信看过在上一篇中提到的三篇文章后,大家已经对颜色处理方面有更深的体会. 之前讲到颜色渐变的效果, 具体怎么做呢,这就需要应用颜色渲染. 首先要介 ...

  10. 生成N个不重复的随机数(转)

    有25幅作品拿去投票,一次投票需要选16幅,单个作品一次投票只能选择一次.前面有个程序员捅了漏子,忘了把投票入库,有200个用户产生的投票序列为空.那么你会如何填补这个漏子? 当然向上级反映情况.但是 ...