php程序员的笔记

  • 网站首页
  • PHP笔记
    • 字符串处理
    • php函数总结
    • 正则表达式
    • 模板框架使用
    • 我的网站模板笔记
    • Ecshop二次开发笔记
    • php源码下载
  • 数据库教程
    • MySQL数据库
    • MongoDB
    • Access数据库
    • Redis
  • JavaScript教程
    • Jquery基础
    • Jquery特效
    • JS常用函数
    • 开源插件开发
    • 谷歌地图开发
  • HTML教程
    • DIV+CSS技术篇
    • 网站优化笔记
    • HTML5 技术
  • 操作系统技巧
    • windows 7系统篇
    • Linux操作系统篇
    • 服务器
  • 互联网资讯
    • 生活杂侃
php程序员的笔记 -> HTML教程 -> DIV+CSS技术篇 -> 复选框(checkbox)和单选框(radio)与文字水平垂直居中对齐的解决方法

复选框(checkbox)和单选框(radio)与文字水平垂直居中对齐的解决方法

今天项目中出现了一个checkbox与同一行的文字不能对齐的问题,检查后发现个问题,checkbox和radio两个标签的默认高宽都是13px,而项目中使用的字体大小却是12px,如果将字体调整为14px就不存在这个问题了,于是作者根据网上查到的资料整理了几种解决办法。

先发一下具体的问题情况以及解决后的效果:

复选框(checkbox)和单选框(radio)与文字水平垂直居中对齐的解决方法

具体解决代码如下:

<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
body{font-size:12px;}
div{float:left;width:110px;}
input{margin:0;padding:0;}
.input1{vertical-align:text-bottom;margin-bottom:-1px;*margin-bottom:-4px;}
.input2{height:13px;vertical-align:text-top;margin-top:0;}
.input3{height:15px;vertical-align:bottom;margin-bottom:-1px;margin-bottom:-2px\9;*margin-bottom:0px;}
.input4{height:14px;vertical-align:top;margin-top:1px;margin-top:0\9;}
.input5{vertical-align:middle;margin-top:-2px;}
.input6{vertical-align:-3px;}
</style>
</head>
<body>
<h2>一般的情况</h2>
<p><input type="checkbox" />复选框&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" />单选框</p>
<div>
<h2>单选框</h2>
<p><input type="radio" class="input1"/>解决方法一</p>
<p><input type="radio" class="input2"/>解决方法二</p>
<p><input type="radio" class="input3"/>解决方法三</p>
<p><input type="radio" class="input4"/>解决方法四phpernote.com</p>
<p><input type="radio" class="input5"/>解决方法五</p>
<p><input type="radio" class="input6"/>解决方法六</p>
</div>
<div>
<h2>复选框</h2>
<p><input type="checkbox" class="input1"/>解决方法一</p>
<p><input type="checkbox" class="input2"/>解决方法二</p>
<p><input type="checkbox" class="input3"/>解决方法三</p>
<p><input type="checkbox" class="input4"/>解决方法四</p>
<p><input type="checkbox" class="input5"/>解决方法五</p>
<p><input type="checkbox" class="input6"/>解决方法六</p>
</div>
</body>
</html>

兼容浏览器:chrome,firefox,ie8,ie7,ie6,safari

备注:个人推荐第 2 种,第 5 种和第 6 种方法。因为这 3 种方法都没有用到 css hack。

您可能感兴趣的文章

  • js限制只能输入英文字母和数字,不能输入中文和其他特殊字符的办法
  • jquery判断checkbox是否选中
  • jquery获取checkbox的attr(checked)一直为undefined问题的解决办法
  • fckeditor上传文件按日期存放及重命名上传文件的方法
  • url传递中文字符,特殊危险字符的解决方案(仅供参考)urldecode、base64_encode
  • javascript判断复选框是否选中
  • jquery判断复选框是否被选中
  • jquery 获取checkbox的选中值(一组和单个)
转载请注明出处:php程序员的笔记
本文永久地址:http://www.phpernote.com/div-css/1085.html
发布时间:2014 年 12 月 03 日 14 时 28 分 00 秒     文章来源:-わ千与千寻
上一篇:PHP采集类Snoopy.class.php介绍以及下载
下一篇:清血管垃圾的几种食物
热门文章
  • QQ 漂浮客服代码,非常方便扩展
  • css中 html > body 是什么意思
  • 如何设置DIV层显示在flash对象之上,兼容ie和firefox等浏览器
  • 给网站添加网站收藏夹图标
  • div css书籍教程推荐《精通CSS+DIV网页样式与布局配套视频教程》
  • iframe属性详细说明
随机文章
  • thinkphp更新数据库的五种方法
  • html标签实现网页上的上标以及下标
  • css性能优化几点需要注意的地方
  • CSS代码优化方案
  • CSS透明效果,兼容IE和firefox
  • CSS打造圆角Table
  • 周热门文章
    • Vcastr 3.0 - flash video(flv播放器) 下载和配置的详细说明
    • css控制英文、中文强制换行与不换行的代码
    • 为你的网站添加小图标Favicon.ico
    • 常见的CSS浏览器兼容性问题
    • CSS给文本输入框添加背景图片
    • readonly、disabled、display、visible的区别
    • CSS3圆角效果实例
    • html标签实现网页上的上标以及下标
    • 快速查找并删除页面多余的CSS代码(Dust-Me Selectors的用法)
    • 复选框(checkbox)和单选框(radio)与文字水平垂直居中对齐的解决方法

All rights reserved. Design by -わ千与千寻.  京ICP备16025782号-1网站地图  友情连接有话要说私人建站招募投稿  广告服务  互联网工具大全