行内标签和设置为block:inline;形式的标签与input并排放置时，为何会错位？例如下面的。

因为在同一行中，所有行内元素默认 baseline 对齐。但是，input（还有textarea、select、object等替换元素）这种替换元素的 baseline 并没有在元素底部。如图：

设置vertical-align: top或者bottom，就能使得所有元素的baseline在同一线上。或者设置非替换元素的line-height。

引自知乎https://www.zhihu.com/question/26778887，貘吃馍香同学的回答，如有侵权，联系我立删。

input 等替换元素的baseline问题的更多相关文章

  1. CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  2. html中label宽度设置、非替换元素和替换元素

    <label ></label> 单独对label设置一个width:100px的属性石不起作用的,和float:left或者display:inline-block配合的话 ...

  3. Javascript进阶篇——(DOM—节点---插入、删除和替换元素、创建元素、创建文本节点)—笔记整理

    插入节点appendChild()在指定节点的最后一个子节点列表之后添加一个新的子节点.语法: appendChild(newnode) //参数: //newnode:指定追加的节点. 为ul添加一 ...

  4. css中margin重叠和一些相关概念（包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes ）

    平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外 ...

  5. CSS基础：替换元素和非替换元素

    简介 根据 "外在盒子" 是内联还是块级我们可以把元素分为内联元素和块级元素,而根据是否具有可替换内容,我们也可以把元素分为替换元素和非替换元素.这种通过修改某个属性值,例如 &l ...

  6. html 替换元素

    参考博客:http://www.cnblogs.com/wkylin/archive/2011/05/12/2044328.html 可替换元素也是行内元素 替换元素是浏览器根据其标签的元素与属性来判 ...

  7. CSS float与clear & 替换元素与非替换元素

    css3盒模型(box)中的一个概念,在css这种,每个元素生成了包含内容的框,有内联元素和块级元素之分.也可以区分为替换元素与非替换元素. 替换元素:浏览器根据标签的元素与属性来判断显示具体的内容. ...

  8. html元素两种分类。替换元素和不可替换元素；块级元素和行内元素

    根据元素本身特点来分类: 替换元素替换元素根据其标签和属性来决定元素的具体显示内容.有<img><input><textarea><select>< ...

  9. CSS 替换元素和非替换元素 行内非替换元素

    html元素也可以分为替换元素和非替换元素 1.替换元素 替换元素是由浏览器根据表示的元素和属性决定显示的内容. 例如:<img src="./image.jpg" /> ...

随机推荐

  1. Java线程安全 关于原子性与volatile的试验

    1. 变量递增试验 static /*volatile*/ int shared=0;//volatile也无法保证++操作的原子性 static synchronized int incrShare ...

  2. Guvav:Options使用和避免NULL

    JAVA中的null null是Java中一个很重要的概念.null设计初衷是为了表示一些不确定的东西.null是Java中的关键字,它是大小写敏感的,你不能将null写成Null或NULL,编译器将 ...

  3. 深入理解IOC

    1. IoC理论的背景 我们都知道,在采用面向对象方法设计的软件系统中,它的底层实现都是由N个对象组成的,所有的对象通过彼此的合作,最终实现系统的业务逻辑. 图1:软件系统中耦合的对象 如果我们打开机 ...

  4. RabbitMQ学习3----运行和管理RabbitMQ

    1.服务为管理 Erlang天生就是为了让应用程序无需知道对方是否存在同一台机器上即可互相通信. Erlang节点:Erlang虚拟机的每个实例.多个Erlang应用程序可以运行在同一个节点之上.节点 ...

  5. nmon指标

    表字段分析 关键指标类型 关键指标名称 关键指标含义 SYS_SUMM CPU% cpu占有率变化情况: IO/sec IO的变化情况: AAA AIX AIX版本号: cpus CPU数量: har ...

  6. Java 多线程详解（三）------线程的同步

    Java 多线程详解(一)------概念的引入:http://www.cnblogs.com/ysocean/p/6882988.html Java 多线程详解(二)------如何创建进程和线程: ...

  7. 7.java 加解密技术系列之 AES

    java 加解密技术系列之 AES 序 概念 原理 应用 代码实现 结束语 序 这篇文章继续介绍对称加密算法,至于今天的主角,不用说,也是个厉害的角色 — — AES.AES 的出现,就是为了来替代原 ...

  8. java虚拟机学习-JVM调优总结-分代垃圾回收详述（9）

    为什么要分代 分代的垃圾回收策略,是基于这样一个事实:不同的对象的生命周期是不一样的.因此,不同生命周期的对象可以采取不同的收集方式,以便提高回收效率. 在Java程序运行的过程中,会产生大量的对象, ...

  9. Building Particle Filters and Particle MCMC in NIMBLE

    This example shows how to construct and conduct inference on a state space model using particle filt ...

  10. maven问题：如何不继承父工程的依赖

    在maven中,使用父工程来管理所有的依赖,当子工程只需要用到父工程的部分依赖,而不是所有依赖时,只需要在父工程的依赖中加入<dependencyManagement></depen ...