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

【问题标题】：How do i place this menu at the bottom right of its parent div?如何将此菜单放在其父 div 的右下角？
【发布时间】：2014-05-22 01:26:09
【问题描述】：

我一直试图将我的导航绝对定位在其父 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;
}

【问题讨论】：

标签： html css positioning absolute

【解决方案1】：

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

改成这个

#nav .menu

进入这个

nav #menu

Demo

【讨论】：

感谢您的帮助，但是，我尝试了这个，它把它移到了屏幕的右下角。也许我需要为其父 div 添加高度？
这是我所在的位置：jsfiddle.net/dRPyJ 仍然没有正确显示。我认为它不在包装器上方的屏幕上。

【解决方案2】：

你犯了一些错误，

你在 css 中使用了#header，但你没有将 id 标头放在<header> 标签中，
你在css中使用#nav而不是nav标签，因为nav标签中没有id，
#header 高度为 100%。它将占用父母的高度。输入height:auto;，这样它就只需要适合其内容的高度。

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

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

【讨论】：

非常感谢您，bandedKrait！多亏了你，我明白了我在那里做了什么！简单的问题导致复杂的焦虑哈哈。