CSS深入之label与input对齐!
我想很多人都会碰到label与input 对齐的问题。 这个东西本身不难,但是要做到与IE这个东西兼容确实有点头疼。 参考各大门户网站的前端源码。 得一方法,以记录之: html确实很简单:
帐号 输入用户帐号.
密码 输入用户密码.
CSS如下:
label{ display: inline-block; padding: 0 10px; vertical-align: middle; }
input{ outline: none; border: 1px solid rgb(216, 216, 216); padding: 2px 10px 2px 10px; }
input[type="text"]{ height: 14px; line-height: 14px; border-radius: 5px; padding:10px 10px; vertical-align: middle; color:#666; } input[type="button"]{ padding: 0px 10px; height:40px; }
.login-box p{ vertical-align:middle; padding:10px 10px; }
那么这里最主要的问题就是 input中采用了paddng的方式。
用padding将input撑开,那么这时候input的高度就只有14px;
然后再设置line-height为14px; 再加上vertical-align垂直居中,就能将input中的文字垂直居中。
需要将input与label垂直对齐,只需要将他们的父节点的vertical-align设置为middel.
再将height与line-height的高度设置为一致,当然必须要比input的实际高度高或者是相等。
这里说的是实际高度。 这里说的是实际高度。
这里记录一下CSS盒子模型的高度问题:
CSS深入之label与input对齐!的更多相关文章
- 关于label和input对齐的那些事
input文本和label对齐 默认状态下,也就是下面这样, 文字和input是居中的. <div> <label>我是中国人</label> <input ...
- 关于label和input对齐的那些是秦
input文本和label对齐 默认状态下,也就是下面这样, 文字和input是居中的. <div> <label>我是中国人</label> <input ...
- css实现表单label文字两端对齐
如图,在我们写页面的时候,经常遇到这种的情况,而需求是想让label文字两端对齐,我们来看看如何用css解决 /**css代码**/ ul li{ list-style: none; } .info- ...
- label 和input/textarea居中对齐
设置label和input/textarea的vertical-align: middle;即可实现垂直方向居中对齐.有时候可能会有偏差,设置input的margin-top使看上去居中对齐
- label与input间距的小问题
先码后文 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- 控制label标签的宽度,不让它换行 label标签左对齐
1==>控制label标签的宽度.解决字段名太长时,不会换行显示 label-width="100px" label标签的宽度是100px; style="widt ...
- angular中label包含input点击事件的问题
问题:当点击input时,input不能勾选,单label内的其他区域点击均可控制input勾选. 分析:点击input时,$event.target.tagName //INPUT, 点击img ...
- label和input里面文字不对齐的解决方法!
测试了集中方法,发现不行.只能用专署标签解决这个问题. <fieldset> <legend>神光咨询后台管理登录</legend> <br /& ...
- label、input、table标签
<label>标签 <form> <label for="male">Male</label> <input type=&qu ...
随机推荐
- HDU 4888 (网络流)
Poroblem Redraw Beautiful Drawings (HDU4888) 题目大意 一个n行m列的矩形,只能填0~k的数字. 给定各行各列的数字和,判定有无合法的方案数.一解给出方案, ...
- Unity3D ShaderLab 布料着色器
Unity3D ShaderLab布料着色器 布料着色器是我们在虚拟现实中经常使用的着色器.本篇就来完成一个较为简单的布料着色器. 新建Shader,Material,InteractiveCloth ...
- 【OpenGL】法线变换详解(Normal Transform)[转]
http://blog.csdn.net/xiajun07061225/article/details/7762711 在图形学中,同样的一个模型视图变换矩阵可以用来变换点.线.多边形以及其它几何体, ...
- M2: XAML Controls
本小节介绍如何在界面上添加简单的XAML Controls, 本例中我们用到了Grid, TextBlock, Button, 和StackPanel控件.XAML自身所有的控件都声明在Windows ...
- linux监控nmon和analyser的使用
测试压力的时候使用linux一个简单的监控工具nmon,不仅可以实时监测,也可以生成文件以图标样式展现,小巧实用 安装nmon nmon实际上是个tarball直接解压到所要放置的目录,然后直接运行就 ...
- ZMMR107-批量更改PO经价值
************************************************************************ Title : ZMMR107 ** Applicat ...
- ZSDR017-客户订货价格和库存
*----------------------------------------------------------------------*ZSDR017-客户订货价格和库存*---------- ...
- Set-常用API及详解
SetAPI: 类别 方法 增 add.addAll 删 remove.removeAll 长 size 遍 iterator 判 isEmpty hashCode 使用与集合大同小异,主要的区别就在 ...
- ZOJ 1048 Financial Management
原题链接 题目大意:给出12个月的收入,求一个平均值. 解法:没什么好说的,就是一个除法. 参考代码: #include<stdio.h> int main(){ int i; float ...
- leetcode之反转链表
原文链接:点击打开链接 Reverse a singly linked list A linked list can be reversed either iteratively or recursi ...