当前位置：首页 → 问答吧 → 为什么加display:inline后，margin:5px auto就无效了，。

为什么加display:inline后，margin:5px auto就无效了，。

时间：2011-06-27

来源：互联网

HTML code


<div class="web">
<div class="web_l"></div>
<div class="web_m"></div>
<div class="web_r"></div>
</div>

CSS code


.web {width:950px; height:230px; margin:5px auto;[color=#800000]display:inline;}[/color].web_l{width:332px; height:230px; float:left; background-color:#666666;}
.web_m{ width:396px; height:230px; float:left;margin-left:5px;margin-right:5px;background-color:#888888;}
.web_r{ width:212px; height:230px; float:right;background-color:#6cccc6;}

如果不加display:inline;
在IE6下面，最后一个web_r就会掉到下面一行去，求解决办法。。。

作者: phpcainiao 发布时间: 2011-06-27

你把宽度设小一点，总的只有950PX。你另外3个加起来950PX，但是还要算上MARGIN的PX呢。。全加起来就超过950了

作者: tcwsyt 发布时间: 2011-06-27

同意楼上

作者: kkjjww 发布时间: 2011-06-27

三个子元素宽度总和加起来小于父元素就可以了，不过浏览器有差异 ie6将border的宽度算在width之内的
而firefox不是这样的

作者: aspwebchh 发布时间: 2011-06-27

引用 3 楼 aspwebchh 的回复:
三个子元素宽度总和加起来小于父元素就可以了，不过浏览器有差异 ie6将border的宽度算在width之内的
而firefox不是这样的

那要怎么解决。。

作者: phpcainiao 发布时间: 2011-06-27

CSS code


.web {width:950px; height:230px; margin:5px auto;[color=#800000]display:inline;}[/color].web_l{width:332px; height:230px; float:left; background-color:#666666;}
.web_m{ width:396px; height:230px; float:left;margin-left:5px;margin-right:5px;background-color:#888888;}
.web_r{ width:212px; height:230px; float:right;background-color:#6cccc6;}