html - 如何将此菜单放置在其父div的右下 Angular ？

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

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

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

最佳答案

你犯了一些错误

您在CSS中使用#header，但没有将id标头放入<header>标记，
您在CSS中使用#nav而不是nav标签，因为nav标签中没有id，
#header高度为100％。它会占用父级的高度。放置height:auto;，以便仅采用适合其内容所需的高度。

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

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

关于html - 如何将此菜单放置在其父div的右下 Angular ？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22952463/