先码后文

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

div {width:500px; height:500px; margin:0 auto; border:#000 solid 1px;}

label { display:inline-block; width:100px;border:#000 solid 1px;}

input { border:#000 solid 1px;}

</style>

</head>

<body>

    <div>

        <p><label>账号</label><input type="text" /></p>

        <p><label>密码</label><input type="text" /></p>

        <p>

            <label>验证码</label>

            <input type="text" /><img src="" width="100" height="20" />

        </p>

    </div>

</body>

</html>

谷歌打开效果如下

验证码的label和input之间的间距明显较上面两个大，将验证码代码的换行去掉，并为一行之后，三个input框就对齐了，原因还不晓得。

PS：img和input没有对齐以前的随笔记录过，只需要分别加个vertical-align:middle就行

label与input间距的小问题的更多相关文章

  1. CSS深入之label与input对齐!

    我想很多人都会碰到label与input 对齐的问题. 这个东西本身不难,但是要做到与IE这个东西兼容确实有点头疼. 参考各大门户网站的前端源码. 得一方法,以记录之: html确实很简单: 帐号 输 ...

  2. 关于label和input对齐的那些是秦

    input文本和label对齐 默认状态下,也就是下面这样, 文字和input是居中的. <div> <label>我是中国人</label> <input ...

  3. 关于label和input对齐的那些事

    input文本和label对齐 默认状态下,也就是下面这样, 文字和input是居中的. <div> <label>我是中国人</label> <input ...

  4. angular中label包含input点击事件的问题

    问题:当点击input时,input不能勾选,单label内的其他区域点击均可控制input勾选. 分析:点击input时,$event.target.tagName   //INPUT, 点击img ...

  5. label 和input/textarea居中对齐

    设置label和input/textarea的vertical-align: middle;即可实现垂直方向居中对齐.有时候可能会有偏差,设置input的margin-top使看上去居中对齐

  6. css如何设置label的字间距

    css.html如何设置label的字间距 .myClass  label{ letter-spacing: 10px; } 如果label需要居中,需加上 text-indent: 10px; 首行 ...

  7. bootstrap中如何使input中的小图标获得点击事件

    bootstrap中,放入input中的小图标是不能点击的. 在表单中经常遇见密码旁边的眼睛图标点击后,可使密码可见. 要使小图标获得点击事件,可在小图标上覆盖一个跟小图标一样大的透明层,然后给透明层 ...

  8. 闲聊select和input常用的小插件

    前言 在pc端的项目中,经常会用到表单标签,莫过于是select和input这两种,这两种相当常用.但往往原生的功能不尽人意,即使 input中type有n多属性,甚至连时间控件都有,但仍旧满足不了我 ...

  9. 在学习HTML——form表单中的label标签时的一点小体会

    在我啃了一遍书本之后,开始了在慕课看视频的过程,从最开始的HTML+CSS的基础课程看起,在第5-9小节讲到了form表单的label标签, 首先看一下慕课的讲解:  label 标签不会向用户呈现任 ...

随机推荐

  1. 【web前端面试题整理04】阿里一行之大神面对面

    前言 这段时间我在河南一家公司当了一段时间的前端主管,最后可耻的匿了,原因各种各样,最主要的就是不想呆在郑州了. 其实这里的同事还是很不错的,面对老总最后的挽留我不是没有动心,而是这个地方确实不太好, ...

  2. python之socket开发

    socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. socket起源于Un ...

  3. Flex Viewer

    一.Flex Viewer简介 Flex Viewer是ESRI公司推出的可以高效开发基于WEB的地理信息应用系统的一种完全免费的应用程序框架.业务人员使用该框架可以无需任何额外的编程就能够通过简单配 ...

  4. Sharepoint学习笔记—习题系列--70-576习题解析 -(Q16-Q18)

    Question 16 You are designing a SharePoint 2010 solution to manage statements of work. You need to d ...

  5. SqlIte数据库并发性

    把遇到的一些小问题都记下来,告诉自己,一些小细节会铸成打错的 今天没事复习以前的知识,用sqlite做数据库,发现修改数据的时候等好久才有反应,而且还失败,可是过一会之后又会好,好了以后又是一样,种以 ...

  6. 2015年Java开发岗位面试题归类

    一.Java基础 1. String类为什么是final的. 2. HashMap的源码,实现原理,底层结构. 3. 说说你知道的几个Java集合类:list.set.queue.map实现类咯... ...

  7. KVO的底层实现

    1.KVO是基于Runtime机制实现的: 2.当某个类的对象的某个属性第一次被观察时,系统会在运行期间动态地创建该类的一个派生类,在这个派生类中重写基类的任何被观察属性的setter方法,派生类在被 ...

  8. Kotlin从入门到掉坑里

    为什么要用Kotlin,和Java完全兼容,相互之间引用完全不是问题,所有没有什么负担. 使用Kotlin已经近一个月,基本上看完了语法就上正式项目了,期间几次准备放弃,最终坚持下来了.关于Kotli ...

  9. Swift 二维码扫描 简单实现

    3.30看视频  学到了二维码简单的实现 还有一些动画的实现  今天就先记录一下二维码扫描的简单实现  不太好记手写一遍 学习的基础在于模仿嘛 创建一个实现二维码扫描的步骤 1.首先是懒加载创建 会话 ...

  10. 控制器View的加载和内存警告流程图

    控制器View的加载 内存警告