html - CSS 未对齐元素无法将其放置到位

Question

关于 oxfordmakespace.com我有两个框，当您通过使浏览器变薄而不是变高将其设置为纵向时，您可以看到它们。

如您所见，一个比另一个高，它是 .nav2 我无法将其放回原位。有人可以帮忙吗？

这是桌面 View 的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--------------------------*/

我需要它与另一个位置相同。

Answer 1

当您的媒体查询遇到该断点时，从 .nav 中删除 position: relative; 或将其设置为 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;
   }

这将导致您的标题仅与文档的顶部对齐，而不是包含在其父文档中