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" /> ...
随机推荐
- 转：Java compiler level does not match the version of the installed Java project facet
a.问题描述:eclipse加载新的项目后报一个错误,具体描述如下: Description Resource PathLocation Type Java compiler level does n ...
- RabbitMQ学习2---使用场景
RabbitMQ主页:https://www.rabbitmq.com/ AMQP AMQP协议是一个高级抽象层消息通信协议,RabbitMQ是AMQP协议的实现.它主要包括以下组件: 1.Serve ...
- HDFS 架构简述
HDFS 架构简述 Hadoop分布式文件系统(HDFS)是一个分布式的文件系统,运行在廉价的硬件上.它与现有的分布式文件系统有很多相似之处.然而与其他的分布式文件系统的差异也是显着的.HDFS是高容 ...
- Github SSH 的key 生成步骤下
Git是分布式的代码管理工具,远程的代码管理是基于SSH的,所以要使用远程的Git则需要SSH的配置. github的SSH配置如下: 一 . 设置Git的user name和email: $ git ...
- 加盟全景-加盟VR虚拟现实-全景智慧城市
作为一个技术整合型产业,VR行业的硬件厂商几乎没有任何技术基础,很多国产虚拟现实VR创业公司基本都是和几家固定的上游零部件提供商合作,全行业都在等待高通骁龙芯片的升级,这和手机行业有几分相似.去年3月 ...
- swift学习 - 计时器
swift学习之计时器 这个demo主要学习在swift中如何操作计时器(Timer),按钮(UIButton),文本(Label) 效果图: 代码 import UIKit class ViewCo ...
- 模拟实现简化版List迭代器&嵌入List
1.迭代器(iterators)概念(1)迭代器是一种抽象的设计概念,其定义为:提供一种方法,使他能够按顺序遍历某个聚合体(容器)所包含的所有元素,但又不需要暴露该容器的内部表现方式. (2)迭代器是 ...
- 抱歉，您必须拥有一个终端来执行 sudo
Linux ssh执行远端服务器sudo命令时有如下报错: sudo: sorry, you must have a tty to run sudo sudo:抱歉,您必须拥有一个终端来执行 sudo ...
- 项目管理之 使用 appledoc 生成开发文档
写项目时通常会遇到要求写开发文档的需求,但是就源代码来说,文档最好和源码在一起,这样更新起来更加方便和顺手.Objective-C 有一些文档管理工具,doxygen, headdoc 和 apple ...
- 用超链接传递数组或get方式
<?php /** * 超链接传递数组参数 */ if($_GET['names']){ $arr=explode('-',$_GET['names']);//将数组分割为字符串 print_r ...