input 等替换元素的baseline问题
行内标签和设置为block:inline;形式的标签与input并排放置时，为何会错位？例如下面的。
因为在同一行中，所有行内元素默认 baseline 对齐。但是，input（还有textarea、select、object等替换元素）这种替换元素的 baseline 并没有在元素底部。如图：
设置vertical-align: top或者bottom，就能使得所有元素的baseline在同一线上。或者设置非替换元素的line-height。
引自知乎https://www.zhihu.com/question/26778887，貘吃馍香同学的回答，如有侵权，联系我立删。
input 等替换元素的baseline问题的更多相关文章
- CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
- html中label宽度设置、非替换元素和替换元素
<label ></label> 单独对label设置一个width:100px的属性石不起作用的,和float:left或者display:inline-block配合的话 ...
- Javascript进阶篇——(DOM—节点---插入、删除和替换元素、创建元素、创建文本节点)—笔记整理
插入节点appendChild()在指定节点的最后一个子节点列表之后添加一个新的子节点.语法: appendChild(newnode) //参数: //newnode:指定追加的节点. 为ul添加一 ...
- css中margin重叠和一些相关概念（包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes ）
平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外 ...
- CSS基础：替换元素和非替换元素
简介 根据 "外在盒子" 是内联还是块级我们可以把元素分为内联元素和块级元素,而根据是否具有可替换内容,我们也可以把元素分为替换元素和非替换元素.这种通过修改某个属性值,例如 &l ...
- html 替换元素
参考博客:http://www.cnblogs.com/wkylin/archive/2011/05/12/2044328.html 可替换元素也是行内元素 替换元素是浏览器根据其标签的元素与属性来判 ...
- CSS float与clear & 替换元素与非替换元素
css3盒模型(box)中的一个概念,在css这种,每个元素生成了包含内容的框,有内联元素和块级元素之分.也可以区分为替换元素与非替换元素. 替换元素:浏览器根据标签的元素与属性来判断显示具体的内容. ...
- html元素两种分类。替换元素和不可替换元素；块级元素和行内元素
根据元素本身特点来分类: 替换元素替换元素根据其标签和属性来决定元素的具体显示内容.有<img><input><textarea><select>< ...
- CSS 替换元素和非替换元素 行内非替换元素
html元素也可以分为替换元素和非替换元素 1.替换元素 替换元素是由浏览器根据表示的元素和属性决定显示的内容. 例如:<img src="./image.jpg" /> ...
随机推荐
- MFC基础程序设计VS2015 最新02
视频教程地址观看:http://pan.baidu.com/s/1mhKQ6kK 对于每个函数的帮助资料都应该详细阅读:a)简要说明:能够快速了解函数的功能:b)参数:每一个参数的功能都应该了解它的含 ...
- 在Caffe上运行Cifar10示例
准备数据集 在终端上运行以下指令: cd caffe/data/cifar10 ./get_cifar10.sh cd caffe/examples/cifar10 ./create_cifar10. ...
- Windows 2008 R2下 如何简单使用IIS来配置PHP网站
虽然PHP网站配置一般大多数人可能会联想到用Apache+php+mysql来配置,但是呢,如果是为了安全性考虑或者是说是为了便捷高效快速的完成工作,那么Apache+php+mysql这个配置工作就 ...
- Charles Proxy 4.1.2 破解版
下载Charles Proxy 4.1.2版本,百度云盘下载 或 去官网下载 安装后先打开Charles一次(Windows版可以忽略此步骤) 在这个网站(http://charles.iiilab. ...
- 谷歌IAP：skusBundle array associated with key ITEM_ID_LIST cannot contain more than 20 items.
这几天在接谷歌的支付,在拉谷歌商品列表的时候转菊花,长时间不返回(querySkuDetails),一开始以为因为IAP有key不对导致的,查了下发现没有问题. 再看logcat,发现了这行: Inp ...
- ar1220f-s四条拨号光纤做的策略路由实现负载均衡
acl number 3001 //内网数据流不需被重定向到外网出口. rule 5 permit ip source 192.168.0.0 0.0.255.255 destination 19 ...
- 【JAVAWEB学习笔记】07_BootStrap、Viewport介绍
今天主要学习了BootStrap,viewport的介绍和最后对网站进行了重构 今天晨读单词: Compatible:兼容性 viewport:视口 device:设备 initial:初始化(缩写i ...
- js算法集合（二） javascript实现斐波那契数列 （兔子数列）
js算法集合(二) 斐波那契数列 ★ 上一次我跟大家分享一下做水仙花数的算法的思路,并对其扩展到自幂数的算法,这次,我们来对斐波那契数列进行研究,来加深对循环的理解. Javascript实 ...
- javaWeb学习总结（8）- JSP属性范围(5)
所谓的属性范围就是一个属性设置之后,可以经过多少个其他页面后仍然可以访问的保存范围. 一.JSP属性范围 JSP中提供了四种属性范围,四种属性范围分别指以下四种: 当前页:一个属性只能在一个页面中取得 ...
- 开涛spring3(4.1) - 资源 之 4.1 基础知识
4.1.1 概述 在日常程序开发中,处理外部资源是很繁琐的事情,我们可能需要处理URL资源.File资源资源.ClassPath相关资源.服务器相关资源 (JBoss AS 5.x上的VFS资源)等 ...