关于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...

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

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

DIV 设置 display:inline-block 导致 DIV 对不齐的解决方法

情景代码如上。 出问题的浏览器: 360,sogou,猎豹的极速模式 给DIV设置display:inline-block属性后,这四个DIV会拍在一排,但是会个别的高一点,不对齐。 解决方法: 给d...

display:inline-block;的神奇用法

浮动布局就是指通过使用float属性,让列表元素依次排列的布局。浮动局部的局限性,就是每个列表元素的高度必须要一致,否则就会像是俄罗斯方块一样,“锯齿相错”,例如一个左浮动列表布局,如果第一行有个列表...

<input type="button" style="display:none">隐藏按钮显示

if($.trim($("#feeType").val())=="zj"){     $("#goonpay").css("display","inline");    }

控制HTML元素的显示与隐藏——display和visibility

有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏,可以通过display或visibility来实现。通过下面的例子了解display和visibility的区别,简单的例子代...
  • zm2714
  • zm2714
  • 2012年09月05日 14:35
  • 92050

解决CSS样式中display:block;不能居中的问题

在网上搜索找到了解决方案:    用display:inline-block;代替即可。

如何解决input,inline-block元素间的空隙

在我们制作类似登陆框的东西的时候,需要用到label和 input text,但是实际上他们之间会存在空隙 用户名: 密码: 我们这...
  • AboyL
  • AboyL
  • 2017年01月13日 22:55
  • 689

行级元素高度不一致,并列垂直居中,如span,和input

行级元素高度不一致,并列垂直居中 .box {background: #999;} .box input{height:30px;line-height:30px;b...

关于display:inline-block的元素不在同一水平线

今天在开发一个仿网易云的应用时,在布局上遇到一个特别奇怪的问题。先看布局如下。 因为我是用vue写的,但是忽略其语法,就当是个不同的九宫格布局。 css代码 就粗现了如下的情况,让我百思...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:关于input元素 和display:inline-block 的元素不在一水平线上的一点发现
举报原因:
原因补充:

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