行内标签和设置为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中的==，equals()

    1. 先从一道面试题说起 请问下面的 public class Demo { public static void main(String args[]){ String a = "a&qu ...

  2. UEditor上传图片到七牛C#（后端实现）

    由于个人网站空间存储有所以选择将图片统一存储到七牛上,理由很简单 1  免费10G 的容量  ,对个人网站足够用 2  规范的开发者文档 和完善的sdk(几乎所有热门语言sdk) 整体思路 图片上传七 ...

  3. EntityFramework中出现DateTime2异常的完美解决办法

    今天在使用entityframework往数据库插入数据的时候,突然出现了一个数据类型转换异常的问题: System.Data.SqlClient.SqlException: 从 datetime2 ...

  4. Android相机是如何获取到图像的

    在研究zxing的过程中,脑袋中一直有个疑惑,那个相机并没有拍照,它是怎么获取图像的 带着这个疑惑查看Camera源码 Camera源码中有这样一个接口: public interface Previ ...

  5. 开涛spring3(7.2) - 对JDBC的支持 之 7.2 JDBC模板类

    7.2  JDBC模板类 7.2.1  概述 Spring JDBC抽象框架core包提供了JDBC模板类,其中JdbcTemplate是core包的核心类,所以其他模板类都是基于它封装完成的,JDB ...

  6. 开涛spring3(3.2) - DI之循环依赖

    3.2.1  什么是循环依赖 循环依赖就是循环引用,就是两个或多个Bean相互之间的持有对方,比如CircleA引用CircleB,CircleB引用 CircleC,CircleC引用CircleA ...

  7. R语言机器学习之caret包运用

    在大数据如火如荼的时候,机器学习无疑成为了炙手可热的工具,机器学习是计算机科学和统计学的交叉学科, 旨在通过收集和分析数据的基础上,建立一系列的算法,模型对实际问题进行预测或分类. R语言无疑为我们提 ...

  8. 不知道Linux的mysql的root密码

    用了好几次了这个方法.记一下: 1.停止Mysql /etc/init.d/mysql stop 或者(根据安装配置的位置不同,而不同) /etc/init.d/mysqld stop 2.进入Mys ...

  9. PropertyGrid自定义控件

    PropertyGrid是一个很强大的控件,使用该控件做属性设置面板的一个好处就是你只需要专注于代码而无需关注UI的呈现,PropertyGrid会默认根据变量类型选择合适的控件显示.但是这也带来了一 ...

  10. 分布式锁2 Java非常用技术方案探讨之ZooKeeper

    前言:       由于在平时的工作中,线上服务器是分布式多台部署的,经常会面临解决分布式场景下数据一致性的问题,那么就要利用分布式锁来解决这些问题.以自己结合实际工作中的一些经验和网上看到的一些资料 ...