针对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- ...
随机推荐
- 使用log4net 日志输出到数据库MySQL
使用Log4Net的输出日志到MySQL 使用步骤如下: 1. 添加引用Log4Net.dll, mysql.data.dll到工程中 note: mysql.data.dll 版本要高,最好到mys ...
- 彻底解决phpcms v9升级后,文章发布出现: Mysql 1267错误:MySQL Error : Illegal mix of collations 解决办法
彻底解决phpcms v9升级后,文章发布出现: MySQL Query : SELECT * FROM `withli_a`.`v9_keyword` WHERE `keyword` = '吼吼' ...
- MYSQL 锁机制 分析
MySQL的表级锁有两种模式:表共享读锁(Table Read Lock)和表独占写锁(Table WriteLock).MyISAM在执行查询语句(SELECT)前,会自动给涉及的所有表加读锁,在执 ...
- C++模板机制总结
模板是C++中非常重要的组成部分,之前自己对这块领域一直不太熟悉.最近趁着有时间学习了一下,特此总结. 首先是函数模板,它的定义方式如例子所示: template <typename T> ...
- Windows系统
1. 更改XP登录界面 怎样启用XP的经典登录界面 第一步:用管理员账号登录系统. 第二步:运行gpedit.msc启动组策略编辑器,找到"计算机配置"--"管理模板&q ...
- VC非法内存值的判断
0xcdcdcdcd - Created but not initialised0xdddddddd - Deleted0xfeeefeee - Freed memory set by NT's he ...
- java中abstract详解
Abstract(抽象)可以修饰类.方法 如果将一个类设置为abstract,则此类必须被继承使用.此类不可生成对象,必须被继承使用. Abstract可以将子类的共性最大限度的抽取出来,放在父类中, ...
- 转载:ActiveMQ的可靠性机制
1.JMS消息确认机制 JMS消息只有在被确认之后,才认为已经被成功地消费了.消息的成功消费通常包含三个阶段:客户接收消息.客户处理消息和消息被确认.在事务性会话中,当一个事务被提交的时候,确认自动发 ...
- Python-2 print
#1 print函数(python版本3.3.5): >>> help(print)Help on built-in function print in module builtin ...
- 哈夫曼树---POJ3253
http://poj.org/problem?id=3253 这就是 最典型的哈夫曼树的题型,我们就根据这道题学习一下哈夫曼树 这是最开始我们把21据下来之后我们据下8,然后再据下5得到34,可以看出 ...