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

时间:2016-03-05 08:36:14

标签: html css html5 css3

我正在尝试使用按钮创建一个响应式菜单,如果窗口宽度低于800px,这些按钮将移动位置。我已经完成了这个,但现在菜单的背景颜色随着按钮的变化而变化。位置。我相信我已经将问题缩小到我使用浮动的问题,但如果我不将#nav类中的项目浮动到左侧,则按钮将不再正确地改变位置。为什么赢得<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> 继承正确的背景颜色?如果浮动是原因,我怎么能避免这个问题?这是HTML:

@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;
    }
}

这是CSS:

   List<Person> person = new List<Person>();
        private void btnGonder_Click(object sender, EventArgs e)
        {
            SendItems();
            this.Close();

        }
        public int SendItems()
        {
            Person pr = new Person();
            pr.telebe = tbTelebe.ToString();
            string telebe = tbTelebe.ToString();
            person.Add(pr);
            Form1 parent = new Form1();
            parent.SendToParent(telebe);
            return 0;
        }

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

4 个答案:

答案 0 :(得分:1)

通过浮动的实现,相应的元素移动到其位置,其余的元素向上移动,以克服这种问题。 使用
{{1}}

在你的情况下,在#nav。

使用它

答案 1 :(得分:0)

向元素clearfix

添加一类#nav
.clearfix::after {
    display: block;
    clear: both;
}

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

答案 2 :(得分:0)

使用css

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

而不是

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

编辑:糟糕!我没注意到@Aman已经给出了相同的答案

感到尴尬......; - )

答案 3 :(得分:0)

试试这段代码:

只需在fload:left css。

中添加#nav即可
#nav {
    float:left;
    width: 97%;
    background-color: #E64A19;
    padding: 0 1.5% 0 1.5%;
}