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="checkbox" id="dd" /><label for="dd">使用label的for属性对齐</label><br />

<label><input type="radio" />文字与文本框放入同一lable实现对齐</label><br />

时间： 2024-12-23 15:09:08

checkbox/input文本框与文字对齐的相关文章

如何让input文本框和图片对齐

如何让input文本框和图片对齐:在默认情况下,input文本框和图片无法垂直居中,总会有所偏差,下面就介绍一下如何实现此效果.代码如下: <input id="qq" name="qq" style="width:100px;vertical-align:middle" /> <img border="0" style="vertical-align:middle"/> 只要给元素

UC浏览器input文本框输入文字回车键自动提交

这是测试今天在jira给我提出的一个bug 下面是贴的代码屏蔽或者禁止回车键 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body>  <!--<input onkeydown="if(event.keyCode==13)

<input>文本框和验证码图片垂直对齐:不知道大家有没有遇到过这样的情况,那就是文本框和验证码图片在垂直方位上不是对齐的,这样有点影响美观度,下面就简单介绍一下如何让它们垂直对齐,代码如下: input,img {vertical-align:middle;} 以上代码可能有兼容性问题,比如IE6可能不支持,那就将input文本框和验证码单独放在容器中控制. vertical-align属性可以参阅CSS的vertical-align属性一章节. 原文地址是:http://www.51tex

[CSS]复选框单选框与文字对齐问题的研究与解决.

前言:今天碰到的这个问题, 恰好找到一个很好的博文, 在这里转载过来学习下. 原文地址:复选框单选框与文字对齐问题的研究与解决. 目前中文网站上面的文字,就我的个人感觉而言,绝大多数网站的主流文字大小为12px,因为在目前高分辨率显示器屏幕下,11px的汉字,其像素点开始不规整,文字不如12px来的显示良好.12px大小的文字就是主流也是底线.然而12px的文字与单选框和复选框是不对齐的.例如下面这张雅虎中国首页在火狐浏览器下的截图: 雅虎中国首页单选框复选框与文字不对齐这里,不是说,雅虎中

复选框、单选框与文字对齐问题

前言目前中文网站上面的文字,就我的个人感觉而言,绝大多数网站的主流文字大小为12px,因为在目前高分辨率显示器屏幕下,11px的汉字,其像素点开始不规整,文字不如12px来的显示良好.12px大小的文字就是主流也是底线.然而12px的文字与单选框和复选框是不对齐的.例如下面这张雅虎中国首页在火狐浏览器下的截图: 雅虎中国首页单选框复选框与文字不对齐这里,不是说,雅虎中国的团队不够认真,而因为这12px大小文字与单选框和复选框对齐的问题不是好解决的.考虑到兼容性,控件本身的特殊性以及代码成本的控

复选框单选框与文字对齐问题的研究与解决

by zhangxinxu from http://www.zhangxinxu.com原文地址:http://www.zhangxinxu.com/wordpress/?p=56 前言目前中文网站上面的文字,就我的个人感觉而言,绝大多数网站的主流文字大小为12px,因为在目前高分辨率显示器屏幕下,11px的汉字,其像素点开始不规整,文字不如12px来的显示良好.12px大小的文字就是主流也是底线.然而12px的文字与单选框和复选框是不对齐的.例如下面这张雅虎中国首页在火狐浏览器下的截图: 雅虎

input文本框录入字母自动大写

向文本框输入文字时,如何让小写字母自动变为大写呢?有一个简单有效的做法是用CSS. <input name="t1" type="text" style="text-transform:uppercase;" /> text-transform 有四个可选:none 默认值.无转换发生 capitalize 将每个单词的第一个字母转换成大写,其余无转换发生 uppercase 转换成大写 lowercase 转换成小写

我的插件のinput文本框实现宽度自适应

本章节介绍一下如何让一个文本框的宽度能够随着文本框中的内容的宽度增长而增长,也就是能够实现宽度自适应效果. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="skyFi.github.io/skylor" /> <title>skyFi.githu

设置input文本框只读效果

设置input文本框只读效果:在实际应用中可能需要将input文本框设置为只读状态,代码实际非常简单,只要添加一个属性即可.代码如下: <input type="text" value="蚂蚁部落" readonly/> 使用readonly属性即可将文本框设置为只读状态,具体可以参阅<input>标签的readonly属性一章节. 原文地址:http://www.51texiao.cn/HTML5jiaocheng/2015/0521/21