http://www.cnblogs.com/wangsir015/p/5555818.html

这几天在做表单时总会碰到复选框(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>

[01] radio ,checkbox 表单文字对齐的更多相关文章

  1. [Swift通天遁地]二、表格表单-(12)设置表单文字对齐方式以及自适应高度的文本区域TextArea

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  2. [转]CSS 表单元素对齐详解

    来源:http://blog.sina.com.cn/s/blog_655388ed0100lzyk.html 简单的设置input{vertical-align:middle}即可,完美的: lab ...

  3. div仿checkbox表单样式美化及功能

    div仿checkbox表单样式美化及功能(checkbox的样式不好看)素材在底部: 效果图: window.css .bj { position: absolute; top: 0; left: ...

  4. ExtJS 同行表单域对齐有误处理办法

    更新记录 2022年5月29日 第一次编辑.使用的ExtJS版本:ExtJS 7.4 问题 原本都是显示正常的表单域,比如这些文本框.选择框都是正常. 在用户进行操作,然后显示验证提示后,明显出现了问 ...

  5. js&jQ判断checkbox表单是否被选中

    js判断: if(document.getElementById("checkboxID").checked){ alert("checkbox is checked&q ...

  6. PHP 提交checkbox表单时 判断复选框是否被选中

    function GetTitleImgPath(){ $titleImgPath = ""; if (isset($_POST["titlecheckbox" ...

  7. vertical-align表单元素垂直对齐

    原文地址:http://www.blueidea.com/tech/web/2009/6910.asp 最近的项目涉及到很多表单的制作,特别是复选框(checkbox)和单选框(radio).但是在前 ...

  8. checkbox/input文本框与文字对齐

    3种方法都能实现checkbox文本框或radio文本框与文字对齐: <meta charset="utf-8"> <input style="vert ...

  9. HTML元素大全(2)-表单

    01.<form>表单 <form> 表单是比较重要的HTML元素,块元素,主要作用是向服务端提交数据.结合表单元素input使用,通过内部的button按钮提交(type=& ...

随机推荐

  1. Windows10系统下查看mysql的端口号并修改

    mysql的端口号默认是3306,初学者可能有时会忘记或者之前修改了默认的端口号,忘记了,或者很多时候我们一台电脑需要安装两个mysql或者想设置一个自己的喜欢的数字,那么接下来我们来看看如何查看或者 ...

  2. 微信小程序js学习心得体会

    微信小程序js学习心得体会 页面控制的bindtap和catchtap 用法,区别 <button id='123' data-userDate='100' bindtap='tabMessag ...

  3. 5-1 json模块

    1.json.loads(json_str)  把字符串(json串)转成字典 import json # 解析json的 json_str = ''' {"name":" ...

  4. Nodejs NPM CNPM优雅安装install

    由于npm和cnpm都能安装组件,安装的组件有的保存在c盘用户目录的Appdata隐藏目录下,有的保存在安装node的目录下,而且安装在c盘的话,重装系统又得重新部署,甚是麻烦,所以这里提供优雅安装的 ...

  5. JZOJ 3508. 【NOIP2013模拟11.5B组】好元素

    3508. [NOIP2013模拟11.5B组]好元素(good) (File IO): input:good.in output:good.out Time Limits: 2000 ms  Mem ...

  6. JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)

    判断是否IE浏览器用的是window.navigator.userAgent,跟踪这个信息,发现在开发环境,识别为IE10,但访问服务器则识别为IE11,但IE11的userAgent里是没有MSIE ...

  7. Spark架构与作业执行流程简介(scala版)

    在讲spark之前,不得不详细介绍一下RDD(Resilient Distributed Dataset),打开RDD的源码,一开始的介绍如此: 字面意思就是弹性分布式数据集,是spark中最基本的数 ...

  8. 用scala的actor并发编程写一个单机版的WorldCount

    前言:最近一段时间比较忙,也是比较懒了吧,好长时间没写博客了,新的一年到来,给自己一个小目标,博客坚持写下去,分享一下这历程!废话不多说,开始正题咯(希望大家喜欢!) 首先这算是一个scala程序的入 ...

  9. python字符编码小结

    首先简要说一下各种字符编码: 1. ASCII 计算机只认识0101,但如何让计算机认识人类语言?将每个字母和符号给予固定的编号,然后将这个编号转换成二进制,计算机就可以正确识别这些字母与符号,同时计 ...

  10. 实验一 查看CPU和内存，用机器指令和汇编指令编程

    (1):使用debug,将下面的程序段写入内存,逐条执行,观察每条指令执行后,CPU中相关寄存器中内存的变化. 机器码        汇编指令 b8 20 4e     mov ax,4E20H 05 ...