设置input(radio,checkbox)和lable对齐的问题

在做页面的时候几次遇到label和前面的小图标无法对齐的情况，后来发现解决方法不过是

label {
    display:inline-block;
    vertical-align:top;
line-height:22px;//根据具体情况调节line-height

 }

时间： 2024-11-06 18:39:50

设置input(radio,checkbox)和lable对齐的问题的相关文章

【css--Form】字体为12px时表单中(radio,checkbox)与文字对齐

字体12px的对齐只是针对radio和checkbox CSS: <pre name="code" class="html">.form {font-size: 12px; line-height: 1.4} .form .txt {width: 180px; height: 25px; padding:3px; border:1px solid #dbdbdb; line-height: 25px; color:#999; vertical-align

高版本jquery尤其是1.10.2的版本设置input radio设置值的最正确的姿势。

$("input:radio[name="analyshowtype"]").attr("checked",false); $("input[name=jizai]:eq(0)").attr("checked",'checked'); $("input[@type=radio][name=sex][@value=1]").attr("checked",true); 以

input radio 与label文字对齐

input{ vertical-align:middle; margin-bottom:2px; *margin-bottom:2px; } 原地址

checkbox/input文本框与文字对齐

3种方法都能实现checkbox文本框或radio文本框与文字对齐: <meta charset="utf-8"> <input style="vertical-align:top" type="checkbox" /><label style="vertical-align:top">使用css对齐</label><br /> <input type=&quo

文字和表单（checkbox/radio）元素垂直对齐方法，兼容Firefox和IE。

这几天在做表单时总会碰到复选框(checkbox)和单选框(radio)与文字不对齐的问题,要不是checkbox上浮了,要不是文字上浮.在前端开发过程中,单(复)选框和它们后面的提示文字在不进行任何设置的情况下,是无法对齐的,而且在Firefox和IE中相差甚大.即使设置了vertical-align:middle,也依然不能完美对齐. 解决办法: 1.文字大小必须是偶数,比如12PX. 2.将文字加上label标签并且也添加vertical-align:middle样式. 3.然后去除表单元

radio 和checkbox与文字对齐问题

原文地址:http://www.tuicool.com/articles/vYJfIf 今天在项目中遇到radio和文字对齐问题(ie不明显,火狐和google比较明显),在此记录. 1.浏览器默认文字大小为14px ,因而当文字字体为14px时radio和checkbox与文字对齐良好,如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Inse

[05] radio ,checkbox 表单文字对齐

http://www.cnblogs.com/wangsir015/p/5555818.html 这几天在做表单时总会碰到复选框(checkbox)和单选框(radio)与文字不对齐的问题,要不是checkbox上浮了,要不是文字上浮.在前端开发过程中,单(复)选框和它们后面的提示文字在不进行任何设置的情况下,是无法对齐的,而且在Firefox和IE中相差甚大.即使设置了vertical-align:middle,也依然不能完美对齐. 解决办法:1.文字大小必须是偶数,比如12PX.2.将文字加

css设置移动端checkbox和radio样式

复选框 `Checkbox `是 Web 应用常用控件,随处可见,原生的复选框控件一般就像下面这样: 这取决于操作系统和浏览器,有些时候,这种样子并不能满足设计要求,这时需要更为精致的复选框样式.以往只有少数浏览器才支持对这类控件应用样式,比如拿到这样一张设计图: blue.png 在过去,想要通过简单地修改样式达成这种设计效果根本不行,不过,现在借助强大的 CSS3 属性 appearance 可以对该类控件有空前的样式控制能力: input[type="checkbox"] { -

Input Radio和Checkbox标签的高富帅用法

input标签中radio和checkbox这标签的原生效果让人无力吐槽,实在太丑. 好在现在weibkit浏览器可以用 -webkit-appearance:none; 来改变自己的矮矬穷形象. radio标签使用场景1:很多图片下方的点点点,这样做的好处是用JS设置一个点为选中只要将这个元素的checked设置为true即可,而且用鼠标点击也不需要另外写JS脚本. 简单版的CSS代码如下: .radio{ width: 10px; height: 10px; -webkit-appeara