当窗口缩小时div不粘住的背景色

Question

我正在尝试创建一个带有按钮的响应式菜单，如果窗口宽度低于 800px，这些按钮将移动位置。我已经完成了此操作，但现在菜单的背景颜色会随着按钮的位置而变化。我相信我已经将问题缩小到我对浮动的使用，但是如果我不将.section类中的项目浮动到左侧，按钮将不再正确更改位置。为什么#nav不会继承正确的背景颜色？如果漂浮是原因，我该如何避免这个问题？这是 HTML：

<div id="nav" class="clearfix">
  <div id="left" class="section">
    <div class="button vanish">TOC</div>
  </div>
  <div id="center" class="section">
    <div class="button">Home</div>
    <div class="button">Contact</div>
    <div class="button">About</div>
  </div>
  <div id="right" class="section">
    <div class="button vanish">Search</div>
  </div>    
</div>

这是 CSS：

@CHARSET "ISO-8859-1";
.clearfix {
    display: block;
    clear: both;
}
#container{
    margin: 0 auto;
    max-width: 1200px;
    font-family: Verdana, Sans-Serif;
    font-size:15px;
    background-color:#eee;
}
#header {
    width: 94%;
    padding: 3%;
    background-color: #FF5722;
    font-family: Serif;
}
#nav {
    width: 97%;
    background-color: #E64A19;
    padding: 0 1.5% 0 1.5%;
}
.button{
    display: inline-block;
    padding: 15px 1.5% 15px 1.5% ;
}
.button:hover {
    color: #fff;
    background-color:#000000;
    text-decoration: none;
}
.vanish{
    display:none;
}
@media all and (max-width : 800px) and (min-width: 331px) {
    #header {
        text-align: center;
    }
    #content {
        width: 94%;
        padding: 3%;   
    }
    .sidebar {
        display: none;
    }
    .vanish{
        display:inline-block;
    }
    .section{
        display:inline-block;
        float:left;
    }
    #left{
        width:20%;
        text-align:left;
    }
    #right{
        width:20%;
        text-align:right;
    }
    #center{
        width:60%;
        text-align:center;
    }
}

这是上述代码的工作版本的链接：http://foothillertech.com/student/webdesign/2015/2nd/g_lebon0819/index/indexTestBenrud.php

Answer 1

通过浮点数的实现，相应的元素移动到它的位置，其余元素向上移动，以克服这类问题。用
overflow: auto;

在您的情况下，请在 #nav 使用它。

Answer 2

将clearfix类添加到元素#nav

.clearfix::after {
    display: block;
    clear: both;
}

问题是由于原因，当有一个带有浮动子元素的元素时，它可能不会将它们包裹起来，因此留下零 （0） 高度，因此样式被应用，但在高度为 0 的父级上。

Answer 3

使用 CSS

#nav {
    overflow: auto; 
    background-color: #e64a19;
    padding: 0 1.5%;
    width: 97%;
}

而不是

#nav {
    background-color: #e64a19;
    padding: 0 1.5%;
    width: 97%;
}

编辑：哎呀!!我没有注意到同样的答案已经由@Aman

感觉很尴尬... ;-）

Answer 4

试试这段代码：

只需在 #nav css 中添加fload:left即可。

#nav {
    float:left;
    width: 97%;
    background-color: #E64A19;
    padding: 0 1.5% 0 1.5%;
}