复选框(checkbox)和单选框(radio)与文字水平垂直居中对齐的解决方法
2017-11-22 11:08
246 查看
今天项目中出现了一个checkbox与同一行的文字不能对齐的问题,检查后发现个问题,checkbox和radio两个标签的默认高宽都是13px,而项目中使用的字体大小却是12px,如果将字体调整为14px就不存在这个问题了,于是作者根据网上查到的资料整理了几种解决办法。先发一下具体的问题情况以及解决后的效果:
![](http://www.bkjia.com/uploads/allimg/141219/0P01444a-0.jpg)
具体解决代码如下:
<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" />复选框 <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"/>解决方法四aerchi.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>
![](http://www.bkjia.com/uploads/allimg/141219/0P01444a-0.jpg)
具体解决代码如下:
<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" />复选框 <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"/>解决方法四aerchi.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>
相关文章推荐
- [乐意黎]复选框(checkbox)和单选框(radio)与文字水平垂直居中对齐的解决方法
- html 复选框(checkbox)和单选框(radio)与文字水平垂直居中对齐
- 单选框radio和复选框checkbox文字垂直居中问题
- 复选框(checkbox)和单选框(radio)与文字居中对齐
- 单选框与复选框与后面的文字在电脑与手机上表现不一致的解决方法
- css3文字水平垂直居中对齐的几种方法
- 复选框(checkbox)和单选框(radio)与文字居中对齐
- 复选框单选框与文字对齐问题的研究与解决
- 表单元素和文字垂直居中对齐问题解决整理
- 复选框单选框与文字对齐问题的研究与解决
- checkbox ( 复选框 ) radio (单选框 )剖析
- 关于checkbox与文字混排无法对齐的解决方法
- JS中获取页面单选框radio和复选框checkbox中当前选中的值
- RadioGroup的RadioButton图片、文字无法居中解决方法
- 复选框单选框与文字对齐问题的研究与解决
- Android初级教程小案例之单选框RadioGroup与复选框CheckBox
- HTML复选框和单选框 radio checkbox
- 表单元素与提示文字无法对齐的解决方法(input,checkbox文字对齐)