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与文字不能居中对齐的解决办法的更多相关文章

  1. html 复选框(checkbox)和单选框(radio)与文字水平垂直居中对齐

    对 input与label同时设置CSS input,label{ vertical-align:middle; }

  2. 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,& ...

  3. Bootstrap内联表单

    有时候我们需要将表单的控件都在一行内显示,就需要将表单控件设置成内联块元素(display:inline-block). 在Bootstrap框架中实现这样的表单效果是轻而易举的,你只需要在<f ...

  4. 单选框input:radio

      单选框 CreateTime--2017年5月15日11:40:04 Author:Marydon 四.单选框 (一)语法 <input type="radio"/> ...

  5. form中 单选框 input[type="radio"] 分组

    在form中有时候需要给单选框分组,这种情况下 可以通过给单选框设置相同的name来进行分组: <html> <head> <title> </title&g ...

  6. bootstrap日期控件在火狐下的模态框中选择时间下拉菜单无效的解决办法

    今天收到程序组提交的一个兼容BUG,在火狐中使用模态框加载日期控件时选择时间下拉菜单没有效果(不能点击),而在谷歌中却是好的, 排错思路:1,在当前页面主层放置一个时间控件,测试通过 2,在ajax加 ...

  7. IE7下,input元素相对父级元素错位解决办法

    原因: 当input仅仅包含父元素,父元素拥有margin属性时,IE7的input就会错误的继承margin属性. 解决办法: 给input元素外面套一个span,label这样的内联元素,这样就会 ...

  8. bootstrap: 内联表单;

    <form class="form-inline"> <div class="form-group"> <label for=&q ...

  9. 修改HTML5 input placeholder 颜色及修改失效的解决办法

    input::input-placeholder{color: #bdbdbd ;} /* 有些资料显示需要写,有些显示不需要,但是在编辑器webstorm中该属性不被识别 */ ::-webkit- ...

随机推荐

  1. Javascript中变量提升的问题

    一.函数声明变量提升 函数声明具有变量提升的问题,所以在函数被声明之前就可以访问. //else中的语句相当于将if中的function重写,因此无论flag为何值,返回的方法始终为重写后的方法. / ...

  2. 好莱坞电影公司&系列电影

    - 好莱坞6大发行公司: - Warner Bros(WB): <哈利·波特>, 黑客帝国, 蝙蝠侠, - New Line cinema新线(2008): 魔戒, 霍比特人, 尖峰时刻, ...

  3. haproxy +keepalived 原创

    Haproxy+keepalived 原理: HAProxy介绍及其定位 HAProxy提供高可用性.负载均衡以及基于TCP和HTTP应用的代理,支持虚拟主机,它是免费.快速并且可靠的一种解决方案.根 ...

  4. caffe网络模型各层详解(一)

    一:数据层及参数 caffe层次有许多类型,比如Data,Covolution,Pooling,层次之间的数据流动是以blobs的方式进行 首先,我们介绍数据层: 数据层是每个模型的最底层,是模型的入 ...

  5. AttributeError: '_csv.reader' object has no attribute 'next'

    我在使用pyhon3.4运行以下代码时报错:AttributeError: '_csv.reader' object has no attribute 'next' import csv import ...

  6. Java基础语法目录

    一.Java相关科普知识1.Java的发展历程2.Java的发展方向3.Java的体系特性二.Java第一个程序1.JavaJDK的安装与环境的配置2.记事本开发Java程序的注意事项与常见问题3.J ...

  7. openssl生成ssl证书

    openssl生成ssl证书 x509证书一般会用到三类文,key,csr,crt. Key 是私用密钥openssl格,通常是rsa算法. Csr 是证书请求文件,用于申请证书.在制作csr文件的时 ...

  8. 安装Nginx作为Windows服务自启动运行

    如果Nginx每次使用都需要手动启动确实很麻烦,所以最好将其设置为Windows系统服务,开机自启动就行了. 1.下载并修改运行环境支持程序 1).下载地址:http://ng-srvinst.att ...

  9. 更新程序基于IIS

    闲着无聊写了个更新程序; 1.支持多种文件格式 2.支持按版本号/文件大小/文件时间进行判断更新 3.支持多级文件目录创建

  10. ZAM 3D 制作简单的3D字幕 流程(二)

    原地址:http://www.cnblogs.com/yk250/p/5663907.html 文中表述仅为本人理解,若有偏差和错误请指正! 接着 ZAM 3D 制作简单的3D字幕 流程(一) .本篇 ...