关闭

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

标签: CSS input inline-bl
1285人阅读 评论(0) 收藏 举报
分类:

每次用到了<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就会对齐。



1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1759次
    • 积分:63
    • 等级:
    • 排名:千里之外
    • 原创:4篇
    • 转载:1篇
    • 译文:0篇
    • 评论:0条
    文章分类