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

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

案例：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5.     <title>测试vertical-align</title>
  6.     <style>
  7.         *{margin:0;}
  8.         label{vertical-align:middle}
  9.         .inputcheckbox{vertical-align:middle;}
  10.         body{font-family:tahoma;font-size:12px;}
  11.     </style>
  12. </head>
  13. <body>
  14.         <input class="inputcheckbox" name="test" value="1" type="checkbox">
  15.         <label>测试文字x</label>
  16.     <br/><br/>
  17.         <input class="inputcheckbox " name="test2" value="2" type="radio">
  18.         <label>测试文字x</label>
  19.     <br/><br/>
  20.         <input class="inputcheckbox " name="Text1" type="text" />
  21.         <label>文字</label>
  22.         <input  class="inputcheckbox " name="Text1" type="text" />
  23.         <label>文字</label>
  24.     <br/><br/>
  25.         <label>测试文字</label>
  26.         <input   class="inputcheckbox " name="Button1" type="button" value="按钮" />
  27.     <br/><br/>
  28.         <select class="inputcheckbox " name="Select1">
  29.             <option>测试文字</option>
  30.         </select>
  31.         <label>测试文字</label>
  32. </body>
  33. </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. Condition-线程通信更高效的方式

    接近一周没更新<Java线程>专栏了,主要是这周工作上比较忙,生活上也比较忙,呵呵,进入正题,上一篇讲述了并发包下的Lock,Lock可以更好的解决线程同步问题,使之更面向对象,并且Rea ...

  2. java学习面向对象之抽象类

    什么是抽象类,之所以说抽象就是具体的反义词喽~抽象离我们最近的距离也就是初中的时候学过的美术课,抽象画派.拿一桶画彩就这么往画布上一泼,那就是抽象.那么java世界当中什么是抽象呢?我们再拿动物还有狗 ...

  3. luoguP2267 琪琪的项链

    题目:http://www.luogu.org/problem/show?pid=2267 题解:这题略吊. 看了之后发现不能用组合数学直接得出公式,然后如果直接暴力也不知道如何去排除两个颜色序列相同 ...

  4. java桌面项目打包_by icewee_写得太棒了，直接转载了

    前言: 我们都知道Java可以将二进制程序打包成可执行jar文件,双击这个jar和双击exe效果是一样一样的,但感觉还是不同.其实将java程序打包成exe也需要这个可执行jar文件. 准备: ecl ...

  5. 网络流（最大流）CodeForces 512C：Fox And Dinner

    Fox Ciel is participating in a party in Prime Kingdom. There are n foxes there (include Fox Ciel). T ...

  6. HDU-2522 A simple problem

    http://acm.hdu.edu.cn/showproblem.php?pid=2522 学习://除数的运算的应用和算法.除法的本质,如果余数出现重复就表示有循环节 A simple probl ...

  7. ASP.Net 验证视图状态 MAC 失败

    错误信息: 验证视图状态 MAC 失败.如果此应用程序由网络场或群集承载,请确保 <machineKey> 配置指定了相同的 validationKey 和验证算法.不能在群集中使用 Au ...

  8. 数据结构学习笔记——stack实现（数组篇）

    一 栈:是一种表,限制插入和删除只能在一个位置,也即是表的末端(也是栈的顶)进行. 基本操作:push 和 pop. 二 栈的数组实现: 运用数组来存储元素,和栈操作先关的是theArray(一个数组 ...

  9. vim setting

    django_百度搜索 最近合并代码,发现文件缩进经常不一致,请大家把以下配置放到自己主目录下.vimrc文件中.   set tabstop=4   set shiftwidth=4   set e ...

  10. 4 hbase表结构 + hbase集群架构及表存储机制

      本博文的主要内容有    .hbase读取数据过程 .HBase表结构 .附带PPT http://hbase.apache.org/ 读写的时候,就需要用hbase了,换句话说,就是读写的时候. ...