+ -
当前位置:首页 → 问答吧 → display:inline-block; 用还是不用?

display:inline-block; 用还是不用?

时间:2011-02-18

来源:互联网

页面中有一个通栏广告的div
.index_ad{margin:0px auto; margin-top:8px; margin-bottom:8px; width:960px; height:91px; clear:both;}

这样的话,在ie6.7都没有问题,可以上下距8px,而且可以居中;但是在火狐里,它距上无效,可以居中,可以距下8px

然后百度,找到了这个display:inline-block;
.index_ad{margin:0px auto; margin-top:8px; margin-bottom:8px; width:960px; height:91px; clear:both;display:inline-block;}

这样的话,现在ie6、7仍然都没有问题,但是在火狐里不能居中,距上和距下都已经实现了8px

不知道怎么解决这个问题,请大家赐教。

作者: zhnao   发布时间: 2011-02-18

请贴图贴完整代码。

作者: birdstudio   发布时间: 2011-02-18

基本看明白意思了。因为代码不全,猜测上边距因为上面有浮动元素的关系或者其他定位所以折叠掉了,如果上面的浮动元素有父元素框,设置overflow的值,如hidden。如果没有,设置上面元素的下边距,不用inline-block。

inline-block递呈为行内元素,所以如果你想要让inline-block居中,应设置父元素text-align:center,然后再在子元素设回。

作者: iifksp   发布时间: 2011-02-19

我估计会这么写
div.index_ad {margin:0px auto; padding:8px 0; width:960px; clear:both;display:inline-block;}
里面广告肯定有a吧
div.index_ad a {display:block; height:91px;}

作者: leilay   发布时间: 2011-02-19