CSS 图片在浏览器调整大小时上下移动

Question

我正在尝试采用响应式网页设计，但我的 CSS 图片在浏览器宽度变化时上下移动时遇到了一些问题。现在我正在导航栏上工作，我只是希望我的菜单按钮在浏览器宽度调整时保持在导航栏内的相同高度，直到它至少点击下一个@media 查询并拉出不同的 CSS属性。

CSS代码：

 html, body
{
 margin: 0 0 0 0;
 padding: 0;
 width: 100%;
 height: 100%;
}
img{
  max-width: 100%
 }
ul {list-style-type: none; }
li {display: inline;}
#wrapper {
padding: 0;
width: 100%;
height: 100%;

    /* Large Resolutions Desktops */
    @media only screen and (min-width: 1600px) {
/* Main Navigation Styling */
#main_nav{
    height: 200px;
    width: 100%;
    background: #1D5799;
}
li.hom a {
    margin-top: .5%;
    display: inline-block;
    width: 349px;
    height: 188px;

    background-image: url('images/menu-desktop/logo-desk.png');
    background-repeat: no-repeat;
    background-position:center;
    text-indent:-9999999px;
    overflow:hidden;
}
li.ab a{
    margin-left: 2%;
    margin-top: 8%;
    display: inline-block;
    left: 20%;
    width: 157px;
    height: 38px;

    background-image: url('images/menu-desktop/about-desk.png');
    background-repeat: no-repeat;
    background-position:center;
    text-indent:-9999999px;
    overflow:hidden;
}
li.iss a{
    margin-left: 2%;
    margin-top: 8%;
    display: inline-block;
    left: 30%;
    width: 152px;
    height: 38px;

    background-image: url('images/menu-desktop/iss-desk.png');
    background-repeat: no-repeat;
    background-position:center;
    text-indent:-9999999px;
    overflow:hidden;
}

li.new a{ 
    margin-left: 2%;
    margin-top: 8%;
    display: inline-block;
    left: 40%;
    width: 133px;
    height: 38px;

    background-image: url('images/menu-desktop/news-desk.png');
    background-repeat: no-repeat;
    background-position:center;
    text-indent:-9999999px;
    overflow:hidden;
}
.menu-main-menu-nav-container{
    display: block;
    height: 100%;
    width: 100%;
}
#mobile_logo{
    display:none;
}
/* Body Styling */
#main_content{overflow:auto;}

/*Foot Styling */
#f_container {
    position: relative;
    bottom:0;
    width: 100%;
    height: 200px;
    background: #1D5799;
    z-index: 1;
}



}

然后这里有几张图片显示了我的意思：

全尺寸，位置正确： http://puu.sh/fX3BV/0551e774ce.jpg

浏览器宽度变小，菜单按钮开始向上移动： http://puu.sh/fX3It/006ff219a5.jpg

菜单按钮将继续向上移动，直到遇到下一个媒体查询并"resets"达到该浏览器的分辨率。我会 post 一个实时的 link 但它现在仍然只是一个本地构建。如果你更喜欢OBS视频来展示效果我可以做。

谢谢

Answer 1

由于您设置的 % margin-top 值，这些项目正在向上移动。尝试使用 px 而不是 margin-top。根据我的经验，您真的只需要使用 % 值进行水平定位

Answer 2

转到 position: absolute 和 top: 40px（大约），然后使用 left 和 right 属性设置其余导航按钮的像素数量。

CSS 图片在浏览器调整大小时上下移动

CSS Images move up and down on browser resize

html

css

responsive-design