html - 缩小窗口时 div 的背景颜色不粘

Question

我正在尝试创建一个带有按钮的响应式菜单，如果窗口宽度低于 800 像素，这些按钮将移动位置。我已经做到了这一点，但现在菜单的背景颜色随着按钮的位置而改变。我相信我已经将问题缩小到使用 float ，但如果我不将 .section 类中的元素 float 到左侧，按钮将不再正确改变位置。为什么 #nav 不能继承正确的背景颜色？如果 float 是原因，我该如何避免这个问题？这是 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

通过float的实现，各自的元素移动到它的位置，其余的元素向上移动，从而克服了这类问题。使用
溢出:自动；

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