我正在尝试使用按钮创建一个响应式菜单,如果窗口宽度低于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
答案 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%;
}