先码后文

<!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. python爬虫技术的选择

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Helvetica } span.s1 { } 本篇文章不是入门帖,需要对python和爬虫领 ...

  2. 《Continuous Delivery》 Notes 2: Configuration Management

    What is Configuration Management? Configuration Management refers to the process by which all artifa ...

  3. 初探百度F.I.S — 由工具到解决方案

    1. 前言 阅兵放假三天,我哪儿也没去,宅着看了一些东东:git命令行.svn命令以及下面的主角——百度FIS.对看过的git.svn的命令也做了一些总结,请参见:<git命令学习笔记>和 ...

  4. 图标集锦：10套免费的社交媒体 & 社交网站图标

    社交网络是最近几年互联网领域最热门的关键词之一,如今社会网络化媒体也成为我们信息获取和传播的重要途径,很多网站都有把内容分享到社交媒体的功能. 社交媒体图标作为向用户传递信息的重要媒介,不管是在网页还 ...

  5. JavaScript学习笔记-面向对象的模块化编程

    面向对象的模块化编程 模块是一个独立的JS文件,模块文件可以包含一个类定义.一组相关的类.一个实用函数库.一些待执行的代码 模块化的目标:支持大规模的程序开发,处理分散源代码的组装,并能让代码正确执行 ...

  6. 关于Canvas模糊的问题

    前言:当我在几个多月前,第一次在移动设备上使用canvas绘制内容的时候,我惊然地发现我绘制的图片以及文字居然都是模糊的!我的内心几乎是崩溃的,因为那是我第一个使用canvas的项目,是一个基于微信端 ...

  7. 【代码笔记】iOS-创建具有中划线的文字

    一, 效果图. 二,工程图. 三,代码. RootViewController.h RootViewController.m - (void)viewDidLoad { [super viewDidL ...

  8. 【Android】友盟的自动更新组件

    前言 又好又专业的服务能帮开发者省很多时间.一开始做项目也准备自己来统计数据.自己做自动更新,随着使用友盟服务的时间增加,渐渐放弃了这种想法,转而研究如何更充分的使用,这里分享一下使用自动更新组件的心 ...

  9. MonoDevelop编辑器中文乱码解决

    说解决乱码分几步,总共分三部! 1. Tools -> Options 2. 3.点击Font->点击TextEditor会出现下边选框,选取喜欢风格并且不乱码即可.

  10. cocoapods遇到的问题 (pod: command not found的问题)

    在使用CocoaPod为项目添加第三方类库时,出现了-bash: pod: command not found的问题: 在网上看到了一位哥的方法:确实有效: