在全宽固定标题内定位导航答案

【问题标题】：Positioning navigation inside a full width fixed header在全宽固定标题内定位导航
【发布时间】：2013-06-01 20:28:24
【问题描述】：

我想要完成的是：

响应式网站
包含 2 个元素的全宽、固定标题：
位于最左侧的徽标，
和主导航栏。

实际上有一个h1在header标签之外，在body里面，因为header是半透明的，所以它显示在header中。

这是网站。 Subject site

问题是：在我的屏幕上，导航位于我想要的位置。也就是说：最后一个链接与居中内容区域的右边缘对齐。

但是，当重新调整浏览器窗口的大小时，导航（预计）会向左移动，并最终在遇到徽标时中断。

我想要做的是让导航保持在主要内容的右侧，直到它到达一个断点，我将使用 css 媒体查询从那里修复它。

提前非常感谢！

这里是html：（我尝试过很多 AP、浮点数、边距（%、px）等的组合。）

<h1 class="header_text">Welcome...</h1>
<header>
<a href="http://www.allaccessbranding.com">
<img id="logo" src="./images/aai_logo_black_108x211.gif" alt="All Access International logo" />
</a>
<div id="main_nav">
<nav id="main_nav_tag">
    <ul>
        <li><a href="index.php" 
        id="here">Home</a></li>
        <li><a href="about.php" 
        >About</a></li>
        <li><a href="services.php" 
        >Services</a></li>
        <li><a href="calendar.php" 
        >Calendar</a></li>
        <li><a href="gallery.php" 
        >Gallery</a></li>
        <li><a href="contact.php" 
        >Contact</a></li>
    </ul>
</nav>

这里是相关的css：

body {
    min-width: 960px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
    background-color: rgb(51,51,51);
}
header {
    position: fixed;
    top: 0px;
    width: 100%;
    height: 108px;
    z-index: 100; 
    background-color: rgba(0, 0, 0, 0.5);
    border-bottom: 2px solid rgb(99,0,0);
}
header #logo {
    float: left;    
}
.header_text {
    margin: 35px 0px 0px 23%;
    font-family: 'Aguafina Script', cursive;
    font-size: 4.6em;
    color: #279D9D;
}
#main_nav {
    width: auto;
    height: 50px;
    font-size: 1.2em;
    float: right;
    margin-right: 19%;
    margin-top: 56px;
}
#main_nav_tag {
    margin: 15px 0 0 5px;
}
#main_nav ul li {
    list-style-type: none;
    float: left;    
    width: auto;
}
#main_nav ul li a {
    line-height: 1.5em;
    color: rgb(255,255,255);
    text-decoration: none;
    text-align: center;
    display: block;
    margin-right: 15px; 
    border-top: 2px solid transparent;
}
#main_nav ul li a:hover {
    border-top: 2px solid rgb(99,0,0);
}
#main_nav ul li #here {
    border-top: 2px solid rgb(99,0,0);
}

【问题讨论】：

你可以使用jsfiddle.net 制作simlpe fiddle
如果您添加您希望网站外观的样机图像（在媒体查询之前和之后），那么我将解决所有问题。我要求提供图片，因为我发现很难准确理解您想要什么。

标签： css header positioning nav

【解决方案1】：

您的#main_nav ul li 中有float: left，这是个问题。

把#main_nav ul li浮动改成右边，像这样：

#main_nav ul li {
    list-style-type: none;
    float: right;    
    width: auto;
}

http://jsfiddle.net/M_Abooali/JKQkQ/

【讨论】：

感谢您的回答，但不幸的是不是正确的。随着浏览器大小的调整，导航仍然向左移动。
我已将代码添加到远程服务器，以便您可以看到自己。
我还在索引页面上添加了一张图片，以便您有更好的参考点。我正在等待使用这张图片的许可，所以我把它放在了异地。
起初没听过fiddle，没看懂参考。我现在正在那里试图弄清楚它是如何工作的，谢谢
对不起，我很欣赏这个建议，但小提琴没有帮助，问题仍然存在。但是，再次感谢。

【解决方案2】：

好的，我能弄明白。我只是简单地将徽标放在绝对位置，使其不流畅。我给 nav 容器设置了 960px 的宽度（与内容区域匹配），并为其应用了 margin: 0 auto ，这使 nav 容器保持在页面的中心。然后我将 float: right 应用于嵌套的导航标签，将其带到容器的右边缘和中提琴！导航保持在重新调整大小的位置。感谢您的帮助。

【讨论】：