Question

我一直试图将我的导航定位在其父div的右下角（标题＆gt;导航＆gt;菜单），我有点迷失。帮助将不胜感激！

我一直试图相对定位它的父div，但是我尝试的每个属性，它要么从浏览器中消失，一直对齐在页面的右下角而不是它的父div，或者在其他地方i'我不想让它去。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="images/favicon.png" />
</head>

<body>

    <div id="wrapper">

        <header>
            <div class="logo">
                <img src="images/logo.png" / id="logo">
            </div>
            <nav>
                <ul id="menu">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="portfolio.html">Portfolio</a></li>
                    <li><a href="career.html">Career</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>             
            </nav>
        </header>

    </div>

</body>
</html>

body {
    margin:auto;
    width:960px;
}

.logo {
    display:block;
    float:left;
    width:242px;
    height:141px;
    margin:0px;
}



#header {
    position:relative;
    height:100%;
}

#nav .menu {
    position:absolute;
    bottom:0px;
    right:0px;
    margin:0px;
    padding:0px;
    float:right;
}

#menu ul {
    list-style:none;
}

#menu li {
    display:inline;
    float:left;
}

#menu a {
    display:block;
    width:120px;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
}

#menu a:hover,a:active
{
background-color:#7A991A;
}

Answer 1

您在css nav中定义的是tag element而非id或menu是id而非class请更改为您的CSS并定义为这样

更改为

#nav .menu

进入此

nav #menu

<强> Demo

Answer 2

你犯了一些错误，

您在css中使用#header，但未将ID标头添加到<header>标记，
您在css中使用#nav而不是导航代码，因为nav代码中没有ID，
#header身高为100％。它会占据父母的高度。将height:auto;放在一起，这样它只需要适合其内容所需的高度。

我做了一个JSFiddle。请检查。希望这能解决你的问题。

http://jsfiddle.net/banded_krait/Q4Zjj/

如何将此菜单放在其父div的右下角？

2 个答案: