Question

我试图设计一个简单的网站每当我检查我的页面的不同分辨率时，菜单栏不断重新调整其在＆＃34;服务联系方式下的位置＆＃34;部分。

是否有某种方法可以在浏览器宽度发生变化时修复位置，以便在尺寸发生变化时不会下降？

我试图让页面看起来像这样：

HTML

<body>
<!-- ############### -->
<!-- OVERALL WRAPPER -->
<!-- ############### -->
<div class="head_wrapper">
    <!-- HeaderBarMain -->
    <div class="header">
        <h2>Contact for services questions on: ####</h2>
        <!-- Contact Information -->
        <!--<div class="contact">-->
        <!-- </div><!-- END contact -->
        <!-- Navigation menu -->
        <div class="navMain">
        <!-- Menu List -->
          <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
          </ul>
        </div><!-- END navMain -->
    </div><!-- END header -->
</div>
</body>

CSS

.head_wrapper {
    width:100%;
}
.header {
    background: #717171;
    height: 60px;
    width: 100%;
    margin-top:0px;
}
.navMain {
    float:right;
    margin:15px 50px 28px 0px;
}
.navMain ul {
    margin: 0px 0px 0px 10px;
    padding: 0px;
}
.navMain ul li {
    margin: 0px;
    padding: 0px 20px;
    list-style:none;
    display:inline;
}
.navMain ul li a {
    margin: 0px;
    padding: 0px;
}
.navMain ul li a:hover {
}
.header h2 {
    margin: 20px 30px 5px 440px;
    font-size:12px;
    float:left;
    color:#FFFFFF;
}

Answer 1

如果您希望nav不要放弃head_wrapper min-width: 960px，那么容器可能不会折叠内部元素。

 .head_wrapper {
    min-width:960px;
    width: 100%;
}

你的代码问题是你给了.header h2 margin-left：440px正在推动导航下降。 head_wrapper是宽度为100%的容器，即取决于屏幕大小。当您调整屏幕大小时，内部元素在px中是静态的，由于空间不足，它们会变得紧凑。只需给容器一个静态宽度。或如果您想制作流畅的广告素材，请不要使用px并将media queries添加到您的CSS中，并查看how to create a responsive navbar。

<强> Fiddle

祝你好运！

Answer 2

如果您不想让导航栏伸展，我建议不要使用％

http://jsfiddle.net/dgrxU/

在该示例中，我刚刚将头部包装宽度更改为1024像素，标题

相同

如果您想管理不同设备或屏幕分辨率的大小，可以使用媒体查询

http://mediaqueri.es

希望这可以帮到你

PD：我不知道系统为什么不允许我添加超链接，对不起

导航栏位置问题解决

2 个答案: