Question

[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;
}

Answer 1

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

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

Answer 2

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

http://jsfiddle.net/QgcL9/

给这些课程允许你漂浮它们。

float:left;
width: 500px;

如果你确定要清除花车，那么你可以在页面的任何地方定位元素。

这里有一些有用的例子： http://www.barelyfitz.com/screencast/html-training/css/positioning/

导航不会像我想的那样留在原地

2 个答案: