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. 42.VUE学习之--组件之子组件使用$on与$emit事件触发父组件实现购物车功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 20190103（GIL，池，阻塞，同步异步）

    GIL锁 什么是GIL GIL全局解释器锁,是防止多个线程在同一时间同时执行的.CPython解释器特有的一种互斥锁. 每一个py文件都会有自己的解释器,也就是说不同py文件的GIL都是独立的, ps ...

  3. 基于neo4j图数据库，实现人口关系大图的基本思路及实现方案。

    近期由于工作需要,需要做一个人口关系大图的存储及检索方案,我们主要的数据对象有:人口(年龄,身份证号码,性别..) :学校信息(学校地址,学校名称,学校级别,学校下边的年级班级..):就职信息(公司名 ...

  4. B1051 复数乘法（15 分）

    [PAT]B1051 复数乘法(15 分) - 路明天 - 博客园 https://www.cnblogs.com/hebust/p/9496809.html 在此对四舍五入输出结果做总结. 对于do ...

  5. 动态规划：HDU1003-Max Sum（最大子序列和）

    Max Sum Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Su ...

  6. PAT Basic 1084

    1084 外观数列 外观数列是指具有以下特点的整数序列: d, d1, d111, d113, d11231, d112213111, ... 它从不等于 1 的数字 d 开始,序列的第 n+1 项是 ...

  7. Google Authenticator(谷歌身份验证器)C#版

    摘要:Google Authenticator(谷歌身份验证器),是谷歌公司推出的一款动态令牌工具,解决账户使用时遭到的一些不安全的操作进行的"二次验证",认证器基于RFC文档中的 ...

  8. java多线程安全的问题

    多线程中一定会遇到线程安全的问题,也就是在同一时间N条线程操作了同一变量,这个变量也叫做共享变量. 举例:(错误的示范) 设计一个投票系统,多个人可以对同一个的票数进行投票,下面看具体代码: 代码: ...

  9. laravel5.2总结--blade模板

    ## 1.基本用法 ``` ##情形1 $name = laravel5 <div class="title"> {{$name}} {{$name}}</div ...

  10. Excel动画教程50例（三）

    Excel动画教程50例(三) 31.Excel自定输入数据下拉列表 32.Excel正确输入身份证号码 33.Excel数据排序操作 34.Excel数据表格中如何将姓名信息按笔画排列 35.Exc ...