码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-02-25 19:44:09      阅读:220      评论:0      收藏:0      [点我收藏+]

标签:.net   ica   移动   链接   line   nbsp   解决   img   wan   

摘自:http://www.xuebuyuan.com/825857.html

最近在使用3个span(或div)制作带圆角边框的按钮时,按照常识,把span的display设置成inline-block,这样就可以设置span的width和height了,很爽的~

可是当我在中间的span写上文字的时候,神奇的事情发生了:

技术分享

是的,写上字的那个span掉下来了,掉落,排版错位,很恶心的东西!使用Chrome的开发者工具查看,css和盒模型没有半点问题,郁闷中……

仔细观察发现,掉落的高度貌似跟文字的高度差不多,试了下,如果把文字字体加大,发现变成这样了:

技术分享

是的,有文字span向上移动了一些!也就是说,掉落的那个、有文字的span的掉落程度跟它上面的文字的大小有关系,文字的大小代表什么?大号文字的重心明显比小号文字的重心高,于是把字体改回原来的样子,然后试着使用vertical-align直接修改文字的重心位置为:

 

vertical-align:top

 

得到这样的结果:

技术分享

成功了!有文字的span跟没有文字的span对齐啦!

 

原因:

很明显是vertical-align设置错误的问题,谷歌了下vertical-align的用法,找到如下链接:

 

CSS属性Vertical Align使用方法讲解

http://www.jzxue.com/wangyesheji/css/201006/11-3937.html

 

大体意思是,vertical-align只用在display属性inline或inline-block的情况下才能使用,默认为baseline,就是“display属性inline或inline-block”的控件的底端跟文字的baseline(基线)对齐:

技术分享

所以,在设置vertical-align之前,左右两个没有文字的span的底端跟中间那个有文字的span里的文字的基线对齐了,所以中间那个span就下降了文字高度的尺寸。而改变文字的尺寸后,基线随之被提高,然后中间有文字的那个span也就跟着上去了。设置vertical-align:top后,左右两边的span的top跟中间span的top对齐,问题解决了~

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

标签:.net   ica   移动   链接   line   nbsp   解决   img   wan   

原文地址:http://www.cnblogs.com/chayan/p/6442396.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!