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

菜单按钮将继续向上移动，直到它到达下一个媒体查询并且＆＃34;重置＆＃34;该浏览器的解决方案。我发布了一个实时链接，但它现在仍然只是一个本地版本。如果您更喜欢OBS视频来展示我能做到的效果。

由于

Answer 1

转到position: absolute和top: 40px（大约），然后使用left＆amp; right属性可设置其余导航按钮的px金额。

Answer 2

由于您放置的保证金百分比值，物品正在上涨。尝试使用px而不是margin-top。根据我的经验，您只需要使用％值进行水平定位

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

2 个答案: