针对bootstrap内联单选框input与文字不能居中对齐的解决办法
1.html代码
<div >
<label class="checkbox-inline first-label">
<input type="radio" name="getOption" id="option1" value="option1" checked>张三
</label>
<label class="checkbox-inline">
<input type="radio" name="getOption" id="option2" value="option2"> 李四
</label>
<label class="checkbox-inline">
<input type="radio" name="getOption" id="option3" value="option3"> 王五
</label>
</div>
2.css代码
.checkbox-inline{
padding:;
margin:0 15px 0 0;
line-height: 20px;
min-height: 20px;
}
input[type='checkbox'], input[type='radio'] {
margin: -2px 5px 0 0;
line-height: 20px;
}
3.css内的只可根据需要相应调整,本文针对label行高20px举例。
针对bootstrap内联单选框input与文字不能居中对齐的解决办法的更多相关文章
- html 复选框(checkbox)和单选框(radio)与文字水平垂直居中对齐
对 input与label同时设置CSS input,label{ vertical-align:middle; }
- npm install 报错 error Unexpected end of JSON input while parsing near '...sShrinkwrap":false,"d' 解决办法
npm install 报错 : error Unexpected end of JSON input while parsing near '...sShrinkwrap":false,& ...
- Bootstrap内联表单
有时候我们需要将表单的控件都在一行内显示,就需要将表单控件设置成内联块元素(display:inline-block). 在Bootstrap框架中实现这样的表单效果是轻而易举的,你只需要在<f ...
- 单选框input:radio
单选框 CreateTime--2017年5月15日11:40:04 Author:Marydon 四.单选框 (一)语法 <input type="radio"/> ...
- form中 单选框 input[type="radio"] 分组
在form中有时候需要给单选框分组,这种情况下 可以通过给单选框设置相同的name来进行分组: <html> <head> <title> </title&g ...
- bootstrap日期控件在火狐下的模态框中选择时间下拉菜单无效的解决办法
今天收到程序组提交的一个兼容BUG,在火狐中使用模态框加载日期控件时选择时间下拉菜单没有效果(不能点击),而在谷歌中却是好的, 排错思路:1,在当前页面主层放置一个时间控件,测试通过 2,在ajax加 ...
- IE7下,input元素相对父级元素错位解决办法
原因: 当input仅仅包含父元素,父元素拥有margin属性时,IE7的input就会错误的继承margin属性. 解决办法: 给input元素外面套一个span,label这样的内联元素,这样就会 ...
- bootstrap: 内联表单;
<form class="form-inline"> <div class="form-group"> <label for=&q ...
- 修改HTML5 input placeholder 颜色及修改失效的解决办法
input::input-placeholder{color: #bdbdbd ;} /* 有些资料显示需要写,有些显示不需要,但是在编辑器webstorm中该属性不被识别 */ ::-webkit- ...
随机推荐
- 单点登录SSO
转载自 http://www.blogjava.net/xcp/archive/2010/04/13/318125.html 摘要:单点登录(SSO)的技术被越来越广泛地运用到各个领域的软件系统当 ...
- SQLite中的时间日期函数(转)
SQLite包含了如下时间/日期函数: datetime().......................产生日期和时间date()...........................产生日期tim ...
- JQGrid 学习1
这几天一直在学习基于MVC的JQGrid. 记得刚毕业时候做web最头疼的就是GridView,各种分页查询删除,后来学习了Ajax,使用的jqury UI框架ligerui给公司做ERP系统,再后来 ...
- Java与C++程序在编译和运行上的区别
Java.C++都属于高级语言,而计算机能认识执行的只是机器码(即二进制),所以高级语言都必须经过直接或间接的转换成汇编以后,才能运行: 对于C/C++这类高级计算机语言,它们的编译器(例如Unix下 ...
- OAF_开发系列29_实现OAF中批次处理迭代器RowSet/RowSetIterator(案例)
20150814 Created By BaoXinjian
- [转]-CSS 元素垂直居中的6种方法
原文地址:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD ...
- git bash下对文件的操作
window下的e盘中webpack文件夹操作 新建文件夹:mkdir wpdemo: 新建文件:touch index.html; 删除文件夹:rm -r wpdemo; 删除文件:rm index ...
- SQL判断某列中是否包含中文字符、英文字符、纯数字 (转)
一.包含中文字符 select * from 表名 where 列名 like '%[吖-座]%' 二.包含英文字符 select * from 表名 where 列名 like '%[a-z]%' ...
- delphi cmd
今天看到有人在问用代码执行CMD命令的问题,就总结一下用法,也算做个备忘. Delphi中,执行命令或者运行一个程序有2个函数,一个是winexec,一个是shellexecute.这两个大家应该都见 ...
- Google Developing for Android 三 - Performance最佳实践
Google Developing for Android 三 - Performance最佳实践 发表于 2015-06-07 | 分类于 Android最佳实践 原文 Developing ...