导航不会像我想要的那样停留在原地答案

【问题标题】：Navigation won't stay in place like I want导航不会像我想要的那样停留在原地
【发布时间】：2013-04-23 19:36:55
【问题描述】：

[1]http://i.stack.imgur.com/tXB4G.png [2]http://i.stack.imgur.com/ub3PN.png

第一张图片 [1] 是我希望始终保持导航的方式（位于居中的中间 div 的左侧），但如第二张图片所示 [2]它在我的信息所在的主 div 的左侧重叠或没有真正锁定...请帮助，我第一次从头开始构建网站！

HTML：

<div id="header" class="wrapper,class">
        <img src="images/header.png">
    </div>

    <div id="nav" class="containerleft">
            <link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
    <ul>
        <li><a href="#1">Home</a></li><br/>
        <li><a href="#2">News</a></li><br/>
        <li><a href="#3">Music</a></li><br/>
        <li><a href="#4">Videos</a></li><br/>
        <li><a href="#5">Photos</a></li><br/>
        <li><a href="#6">Store</a></li><br/>
        <li><a href="#7">Contact</a></li><br/>
    </ul>

    </div>

    <div id="main" class="center">
    testing text here in my main div!



    </div>

CSS：

#header
{
    margin-top: 40px;
}

#nav
{
    position: absolute;
    top: 170px;
    margin-left: 20%;
    margin-right: auto;
        font-family: 'Quicksand', sans-serif;
        text-align: right;
}

#main
{
    position: relative;
    top:10px;
        background-image:url(images/main_box.png);
        background-repeat:no-repeat;
        background-position: center;
        width: 668px;
        height: 578px;
}

【问题讨论】：

你应该把你的#nav放在#main div里面，用一个负的left值把#nav推到外面。

标签： css html navigation navbar

【解决方案1】：

没有图像或尺寸就很难做任何事情。我认为如果你给你#nav 一个宽度，比如width: 300px; 并确保它们在单独的 div 或容器中，你应该得到你正在寻找的效果。

如果你能想出一个关于 jsFiddle 的例子，我很乐意为你玩弄它。

【讨论】：

【解决方案2】：

我倾向于通过浮动 div 标签然后使用它们的宽度来定位它们，如下所示：

http://jsfiddle.net/QgcL9/

给一个类这些允许你浮动它们。

float:left;
width: 500px;

如果您确保清除浮动，则可以在页面上的任何位置正常定位元素。

这里还有一些关于这种定位的有用示例： http://www.barelyfitz.com/screencast/html-training/css/positioning/

【讨论】：