我正在尝试设计一个简单的网站 每当我检查页面的不同分辨率时，菜单栏 不断重新调整其在“服务联系”部分下方的位置。
有什么方法可以在浏览器宽度发生变化时固定位置，使其在尺寸发生变化时不会下降？
我试图让页面看起来像这样:
http://postimg.org/image/emr6eh63h/
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;
}
最佳答案
如果你不想让你的导航栏拉伸(stretch)，我建议不要使用 %
http://jsfiddle.net/dgrxU/
在那个例子中，我只是将 head-wrapper 宽度更改为 1024 像素，与标题相同
如果你想管理不同设备或屏幕分辨率的大小，你可以使用媒体查询
http://mediaqueri.es
希望对你有帮助
PD:我不知道为什么系统不允许我添加超链接，很抱歉
关于html - 导航栏位置问题解决，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22872280/