针对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- ...
随机推荐
- bzoj1553: XOR网络
Description 计算给定范围内有多少种输入可以使输出为1. 我们假设3 < n < 100, 3 < m < 3000,而且网络中的门是用1到m之间的数任意编号的. ...
- 深入理解Session与Cookie
Session与cookie的作用都是为了保持访问用户与后端服务器的交互状态. cookie通过把所有要保存的数据通过HTTP协议的头部从客户端传递到服务端,又从服务端再传回到客户端,所有的数据都存储 ...
- [转]uboot中SPL作用
转:http://blog.csdn.net/voice_shen/article/details/17373671 这篇文章写的非常详细 [u-boot: 2014.01-rc1] 本文将使用sam ...
- mysql解决Value ‘0000-00-00 00:00:00’ can not be represented as java.sql.Timestamp
同步发布:http://www.yuanrengu.com/index.php/mysqlsolvetimestamp.html 在使用mysql时,如果数据库中的字段类型是timestamp,默认为 ...
- Server Name Indication(SNI)
转载自: http://openwares.net/misc/server_name_indication.html Server Name Indication是用来改善SSL(Secure Soc ...
- 【OpenCV练习】图片腐蚀
在简单显示出图片之后,这次尝试一下将图片进行腐蚀操作,代码如下. #include <iostream> #include <opencv2/highgui/highgui.hpp& ...
- Aop资料整理
1.Spring AOP 实现机制2 http://cjhz.iteye.com/blog/2245161 http://itindex.net/detail/29812-aop 2.跟我学aspec ...
- C++设计模式-Mediator中介者模式
Mediator中介者模式作用:用一个中介对象来封装一系列的对象交互.中介者使各对象不需要显式地相互引用,从而使其耦合松散,而且可以独立地改变它们之间的交互. UML如下: Colleage抽象同事类 ...
- Python体验(07)-图形界面之菜单
顺序安装以下程序: python解释器:https://www.python.org/downloads/ wxPython图形界面框架包:http://www.wxpython.org/ pycha ...
- UML Sequence sample: if-else
if (balance >= amount) { ... } else { ... }