Question

我目前正在尝试为自己构建一个基本的CSS布局，我想部署一个可扩展的菜单，将其余的内容推出屏幕（或容器）。为此，我使用了white-space:nowrap。然后我计划操纵menu-div的宽度，这对我来说很好。但是，似乎在容器中的子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/

宽度自动导致宽度大于子宽度的总和

2 个答案: