宽度 auto 导致宽度大于子宽度的总和

Question

我目前正在尝试为自己构建一个基本的 CSS 布局，我想在其中部署一个可将其余内容推出屏幕（或容器）的可扩展菜单。为此，我使用了 white-space:nowrap。然后我打算操纵菜单的宽度-div，这对我来说很好用。但是，容器中的 child-div 之间似乎应用了某种填充或边距，我找不到摆脱它们的方法。你能帮我吗？我也想了解导致此问题的原因。非常感谢！

CSS:

html{
    margin:0;
    padding:0;
    font-family: 'Open Sans', sans-serif;
}
body{
    margin:0;
    padding:0;
}
#container{
    width:1024px;
    height:768px;
    background-color:#000;
    overflow:hidden;
    white-space:nowrap;
}
#icons{
    width:30px;
    height:100%;
    display: inline-block;
    background-color:#9e971f;
}
#menu{
    width:100px;
    height:100%;
    display: inline-block;
    background-color:#1f939e;
}
#top{
    height:40px;
    width:100%;
    display: inline-block;
    vertical-align: top;
    background-color:#1f3f9e;
}

HTML:

<div id="container">
    <div id="icons"></div>
    <div id="menu"></div>
    <div id="top"></div>
</div>

FIDDLE

Answer 1

解决这个问题的一个简单方法是删除由每个 div:

之间的换行符引起的空白

<div id="container">
    <div id="icons"></div><div id="menu"></div><div id="top"></div>
</div>

Answer 2

使用 float: left; 应该有效：

http://jsfiddle.net/hjLdrjzx/

宽度 auto 导致宽度大于子宽度的总和

Width auto results in larger width than the sum of children's width

css

width