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. 单点登录SSO

    转载自 http://www.blogjava.net/xcp/archive/2010/04/13/318125.html   摘要:单点登录(SSO)的技术被越来越广泛地运用到各个领域的软件系统当 ...

  2. SQLite中的时间日期函数(转)

    SQLite包含了如下时间/日期函数: datetime().......................产生日期和时间date()...........................产生日期tim ...

  3. JQGrid 学习1

    这几天一直在学习基于MVC的JQGrid. 记得刚毕业时候做web最头疼的就是GridView,各种分页查询删除,后来学习了Ajax,使用的jqury UI框架ligerui给公司做ERP系统,再后来 ...

  4. Java与C++程序在编译和运行上的区别

    Java.C++都属于高级语言,而计算机能认识执行的只是机器码(即二进制),所以高级语言都必须经过直接或间接的转换成汇编以后,才能运行: 对于C/C++这类高级计算机语言,它们的编译器(例如Unix下 ...

  5. OAF_开发系列29_实现OAF中批次处理迭代器RowSet/RowSetIterator(案例)

    20150814 Created By BaoXinjian

  6. [转]-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 ...

  7. git bash下对文件的操作

    window下的e盘中webpack文件夹操作 新建文件夹:mkdir wpdemo: 新建文件:touch index.html; 删除文件夹:rm -r wpdemo; 删除文件:rm index ...

  8. SQL判断某列中是否包含中文字符、英文字符、纯数字 (转)

    一.包含中文字符 select * from 表名 where 列名 like '%[吖-座]%' 二.包含英文字符 select * from 表名 where 列名 like '%[a-z]%' ...

  9. delphi cmd

    今天看到有人在问用代码执行CMD命令的问题,就总结一下用法,也算做个备忘. Delphi中,执行命令或者运行一个程序有2个函数,一个是winexec,一个是shellexecute.这两个大家应该都见 ...

  10. Google Developing for Android 三 - Performance最佳实践

    Google Developing for Android 三 - Performance最佳实践 发表于 2015-06-07   |   分类于 Android最佳实践 原文 Developing ...