在oxfordmakespace.com上我有两个盒子，当你将浏览器设置为肖像时，你可以看到它比它更薄更容易。
你可以看到一个高于另一个，它是.nav2我无法恢复原状。有人可以帮忙吗？
这是桌面视图的CSS
/* navbar desktop */
.nav {
float:right;
width: 40%;
background-color: #612;
height: 30px;
border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
}
.nav ul {
list-style: none;
margin: 0 auto;
padding: 0 0 0 10px; //reset default padding
}
.nav li {
float: right;
display: inline;
}
.nav a, .nav a:link, .nav a:visited {
float: left;
padding: 5px 5px 5px 5px;
color: white;
display: inline-block;
height: 20px;
}
.nav a:active, a:visited {
color: Black;
}
.nav .current a {
background: #499;
color: black; /*this changes the desktop view current link*/
border-radius: 5px;
}
.nav a:hover, .nav a:active, .nav .active a:link, .nav .active a:visited {
background: #253;
}
/*<!----------------------------------------------------------------->*/
.nav2 {
float:left; /*desktopbackground*/
width: 40%;
background-color: #612;
height: 30px;
border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
}
.nav2 ul {
list-style: none;
margin: 0 auto;
padding: 0 0 0 10px; //reset default padding
}
.nav2 li {
float: left;
display: inline;
}
.nav2 a, .nav2 a:link, .nav2 a:visited {
float: right;
padding: 5px 5px 5px 5px;
color: white;
display: inline-block;
height: 20px;
}
.nav2 a:active, a:visited {
color: Black;
}
.nav2 .current a {
background: #499;
color: black; /*this changes the desktop view current link*/
border-radius: 5px;
}
.nav2 a:hover, .nav2 a:active, .nav2 .active a:link, .nav2 .active a:visited {
background: #253;
}
这是肖像模式的CSS
.nav {
width: 100%;
position: relative;
min-height: 40px;
background-color: #999;
margin: 0px 0;
}
/*a {
color: Black;
height: 20px;
display: block;
}*/ /*No longer used*/
.nav ul {
width: 50%;
padding: 2% 2% 2% 2%; /*this controls the displayed word padding*/
position: absolute;
top: 0; /*physical position of box holding links*/
left: 46%; /*physical position of box holding links*/
border: solid 0px #aaa;
background: #fff url(Images/topright.png) no-repeat ; /*background color for links*/
background-size: 15% 75%; /*changes for image*/
background-position: 90% 50%;
}
.nav li {
width: 100%;
text-align: left;
float: left;
display: none; /* hide all <li> items */
margin: 0;
}
.nav .current {
padding: 0 0 10px 0 ;
Background: none;
pointer-events: none; /*allows you to click on the menu usinga touch screen and not make the page load*/
display: block; /* show only current <li> item */
}
.nav .current a {
background: none;
color: Black; /* changes current links color when not active*/
}
/*-----------------------------------------------------*/
.nav a {
display: block;
padding: 3% 5% 3% 10%;
text-align: Left;
color: black; /*changes every text item in mobile menu*/
font-size: 150%;
font-style: Arial,serif-sans;
}
.nav a:link {
color: black;
}
.nav a:hover { /*changes the moused over or selected link in nav bar*/
border-radius: 5px;
color: black;
background: lightgreen;
}
/*-------------------------------------------------------*/
/* on nav hover */
.nav ul:hover {
background-image: none;/*hides the background image when the navbar exands to stop it stretching*/
}
.nav ul:hover li {
display: block;
margin: 0 0 15px; /*space between each menu item*/
}
/*NAVBAR--------------------------*/
.nav2 ul {
width: 35%;
padding: 2% 2% 2% 2%; /*this controls the displayed word padding*/
position: absolute;
top: 00%; /*physical position of box holding links*/
left: 2.5%; /*physical position of box holding links*/
border: solid 0px #aaa;
background: #fff url(Images/topright.png) no-repeat ; /*background color for links*/
background-size: 15% 70%; /*changes for image*/
background-position: 10% 50%;
}
.nav2 li {
width: 100%;
text-align: left;
float: left;
display: none; /* hide all <li> items */
margin: 0;
}
.nav2 .current {
padding: 0 0 10px 0 ;
Background: none;
pointer-events: none; /*allows you to click on the menu usinga touch screen and not make the page load*/
display: block; /* show only current <li> item */
}
.nav2 .current a {
background: none;
color: Black; /* changes current links color when not active*/
}
/*-----------------------------------------------------*/
.nav2 a {
display: block;
padding: 3% 5% 3% 10%;
text-align: Left;
color: black; /*changes every text item in mobile menu*/
font-size: 150%;
font-style: Arial,serif-sans;
}
.nav2 a:link {
color: black;
}
.nav2 a:hover { /*changes the moused over or selected link in nav bar*/
border-radius: 5px;
color: black;
background: lightgreen;
}
/*-------------------------------------------------------*/
/* on nav hover */
.nav2 ul:hover {
background-image: none;/*hides the background image when the navbar exands to stop it stretching*/
}
.nav2 ul:hover li {
display: block;
margin: 0 0 15px; /*space between each menu item*/
}
/*-------------------------------------------------------*/
} /*media query end--------------------------*/
我需要它与另一个人处于相同的位置。
答案 0 :(得分：0)
当您的媒体查询点击该断点时，从position: relative;移除.nav或将其设置为position: static如果您正在使用媒体查询只是覆盖您的桌面css
@media only screen and (max-width: 600px) and (min-width: 150px), (orientation: portrait)
.nav {
width: 100%;
/*position: relative;*/ //remove or set to position: static
min-height: 40px;
background-color: #999;
margin: 0px 0;
top: 0;
}
这会使您的标题只对齐到文档的顶部而不是包含在其父
中