关于input元素 和display:inline-block 的元素不在一水平线上的一点发现

原创 2016年08月31日 14:13:07

每次用到了<input/> 元素 和inline-block的<span></span>(不一定是span,其他一些inline的元素也是一样)元素,他们总是会不在一个水平线上,有时候用浮动可以解决。

但是有的时候并不想用浮动解决,这时候可以用vertical-aline来实现。

在W3School中,对于 vertical-aline 的介绍是:该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。

也就是说,我在这个元素 加了vertical-aline属性之后,其他和他同一行的带有inline 属性的元素就会根据vertical-aline的值来与他对齐。

上图情况就是我今天遇到的,于是我就在后面的<span>提交</span>这里加了vertical-aline。情况得到改善


但是这样想让他有间距,却不能在span这里加margin了,不然还是会错位,只能在input上面加。看下图


这是在span加的margin


这是在input加的margin

原因可以通过图片看出来,加了margin之后,span在文本流中所占的高度,是margin值加上他的height,而vertical-aline之后,其他元素参照对齐的位置是就是他在文本流中所占高度的位置,所以导致错位的出现。只要将margin加在其他元素上,就不会有这个问题。


以上都是一点个人理解,如果有错的地方,欢迎指正。谢谢!

对了,最后,还有就是<input type="checkbox"/>复选框 与 12px 文字的对齐问题,实际上只要再input 上面加vertical-aline:middle  就可以解决。

关于这个 我也是在大神张鑫旭 的个人博客里面学到的。

PS:CSDN 写博客的时候,下面选择个人分类的复选框就没有对齐 如果给复选框加vertical-aline: middle就会对齐。



input标签和button放在一行写:inline元素的空白间隙问题

问题的缘由是因为我要写一个小组件,让一个input文本框和一个button按钮放在一行,类似如下的效果: 我的css设置如下:.same{ padding: 0; margin: 0...
  • zzl1243976730
  • zzl1243976730
  • 2016年09月25日 12:32
  • 3626

“display:block-inline形式的Span或Div中添加文字后,导致Span或Div排版掉落、错位”的原因及解决方法

在开始用display:inline-block的时候,只知道有baseline这么一说,而且当时记笔记解决了空隙问题,百度一堆文章,什么终极解决办法等等,还记录了一些问题,当时不明白,到今天才明白v...
  • Esther_Heesch
  • Esther_Heesch
  • 2016年05月07日 23:34
  • 5944

inline-block之后意外发现块下沉

前几天面试某M公司的前端开发,被虐了一通之后,发现自己的前端学的真是一塌糊涂,总结一下各个问题,发现前端之路漫漫,还需潜心修行。 在网上查找关于浏览器兼容的问题,几乎每一篇都提到了inline-bl...
  • qq_27545151
  • qq_27545151
  • 2015年09月20日 17:16
  • 3432

display属性值block,inline和inline-block概念和区别

一、总体概念1、block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block...
  • javaloveiphone
  • javaloveiphone
  • 2016年03月18日 17:32
  • 2999

关于display的属性:block和inline-block以及inline的区别

介绍一些简单的布局,block,inline-block,inline的简单区别,处女作哈哈
  • sinat_31311369
  • sinat_31311369
  • 2016年09月03日 20:48
  • 1731

inline-block在IE8,9的间隙问题

奇偶【
  • zoupeng163
  • zoupeng163
  • 2014年06月20日 17:46
  • 1201

去除inline-block元素间间距的N种方法

一、现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: 间距就来了~~ 我们使用CSS更改非inline-block水...
  • xiebaochun
  • xiebaochun
  • 2014年09月10日 10:55
  • 10339

display:inline-block的icon不垂直居中问题

需要了解知识点: 1、基线:基线并不是汉字的下端沿,而是英文字母x的下端沿; 2、行高指的是文本行的基线间的距离; 图片来源链接地址! 进入正题: 父元素设置line...
  • u012076852
  • u012076852
  • 2016年09月07日 11:50
  • 3601

inline-block元素之间的空隙的消除方法

在CSS布局中,如果我们想要将一些元素在同一行显示,其中的一种方法就是把要同行显示对的元素设置display属性为inline-block。但是你会发现这些同行显示的inline-block元素之间经...
  • wu_xiaozhou
  • wu_xiaozhou
  • 2016年10月25日 17:29
  • 412

拜拜了,浮动布局-基于display:inline-block的列表布局 张鑫旭博客笔记

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1194 ...
  • sentimental_dog
  • sentimental_dog
  • 2016年08月09日 22:58
  • 1149
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:关于input元素 和display:inline-block 的元素不在一水平线上的一点发现
举报原因:
原因补充:

(最多只允许输入30个字)