label按钮和文字对齐

做表单的时候，经常遇到：复选框和文字对不齐的情况

==========================

下面方法可以对齐

<div class="content">
<label class="lab-wrap">
<input class="checkbox" type="checkbox" id="remmber">记住账号
</label>
</div>

.content {
width: 400px;
height: 100px;
border: 1px #000 solid;
margin: 100px auto;
}

.content .lab-wrap {
color: #333;
margin-right: 5px;
font-size: 14px;
float: left;
line-height: 14px;
}

.checkbox {
float: left;
margin-top: 0;
vertical-align: baseline;
}

===============================

下载链接：http://files.cnblogs.com/files/leshao/label%E5%AF%B9%E9%BD%90.rar

时间： 2024-08-11 01:36:05

label按钮和文字对齐的相关文章

CSS图标文字对齐和表单输入框文字对齐兼容

张鑫旭的一篇文章,讲到20像素图标对齐和表单元素40像素对齐有所收获,谢谢@张鑫旭 ,很多观点跟平时的处理方式不谋而合,一般来说,我处理图标如果临近的话都会使用同样宽高,然后使用inline-block比较多,表单输入框和按钮以line-height:21-22为准.然后超出的用padding来补充. 以下摘录部分原文中的实践代码. 1.图标和文字对齐一般的图标和文字对齐html代码: <p><i class="icon"></i>前端开发博客&l

iOS上让按钮文本左对齐问题

一,问题分析 1.在做历史记录视图的时候,由于让键盘退出后才能触发表格的 didselect 那个代理方法,也就是得点两下才触发,而表格中的按钮点一下就可以立即响应. 2.于是我就有了用按钮事件代替 cell 的代理方法. 3.本以为用 contentEdgeInset 和 titleLabel 的 textAlignment就能解决按钮文字的左对齐问题,结果都失败了. 4.结果上网一查,textAlignment"只是让标签中的文本左对齐,但并没有改变标签在按钮中的对齐方式." 5.

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

点击按钮插入文字在文本框

一款实用的网页特效,点击按钮在文本框中插入文字,特别是在一些需要输入文字的地方尤其适用,可减少用户输入的麻烦,只需点击一下对应的按钮,即可把文字插入到文本框的指定位置,不过目前来说,本代码不算完善,有一些小的Bug希望高手们帮忙修正哦. <!doctype html> <html> <head> <title>点击按钮插入文字</title> <script language="javascript"> //移动光

css控制图片与文字对齐

文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐. 设置各对象的vertical-align属性,属性说明:baseline-将支持valign特性的对象的内容与基线对齐sub-垂直对齐文本的下标super-垂直对齐文本的上标top-将支持valign特性的对象的内容与对象顶端对齐text-top-将支持valign特性的对象的文本与对象顶端对齐middle-将支持valign特性的对象的内容与对象中部对齐bottom-将支

iOS上如何让按钮文本左对齐问题

// button.titleLabel.textAlignment = NSTextAlignmentLeft; 这句无效 button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;button.titleEdgeInsets = UIEdgeInsetsMake(0, 10, 0, 0); 这里使用 button.titleLabel.textAlignment = NSTextAlignment

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

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

css:图标与文字对齐的两种方法

(好久没写博客了,这几个月的积累比较零碎,记在本子上,现在开始整理归类) 在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种对img设置竖直方向对齐为middle, <div> <img src="" class="heart"> <span>1169</span> <img src="" class="comment"

实现多行文字对齐的原理

多行文字对齐的现象之前已经实现过多行文字对齐的方法,实现方法详见:多行文字对齐的实现方法,多行文字兼容IE6的关键就是一个空标签<i></i>, 下面我们来看一看不加i标签之前IE6下显示的效果: 而chrome下的效果: 加下i标签后,IE6下的显示效果: 可见在现代浏览器中,对于有没有i标签是没有影响的,为什么加上这个标签之后,IE6就可以实现多行文字对齐了呢? 多行文字对齐的原理在盒子模型中,父盒子line-height的高度是由子盒子中高度最高的那个盒子决定的,在本例中