为什么两个内联块在父包装器div中排成一行？

Question

我有这样的HTML

<div id="wrapper">
    <div id="main">
        <p>test</p>
    </div>
    <div id="sidebar">
        <p>test</p>
    </div>
</div>

和CSS

#wrapper {
    width: 960px;
    margin: 0px auto;
}

#main {
    width: 790px;
    display: inline-block;
    padding: 0px;
    margin: 0px;
}

#sidebar {
    width: 170px;
    display: inline-block;
    vertical-align: top;
    padding: 0px;
    margin: 0px;
}

示例:http://jsfiddle.net/Hpwff/

问题是即使两个div的总和是960px,这与父容器(#wrapper)的宽度相同,它们也不会相互浮动.我必须将侧边栏或主容器宽度缩回4px,以便它们适合.为什么会这样,有没有解决方法呢？

Answer 1

你们两个人之间有换行符div; 因为它们是inline-block,它们之间的换行符被渲染为空格.如果没有空间,它可以按预期工作.