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

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

html css

Html 如何将此菜单放置在其父div的右下角？,html,css,positioning,absolute,Html,Css,Positioning,Absolute,我一直试图将我的导航完全定位在其父div（header>nav>menu）的右下角，我有点迷路了。谢谢你的帮助我一直在尝试相对定位它的父div，但是我尝试的每个属性，要么从浏览器中消失，要么在页面的右下角对齐，而不是它的父div，或者我不希望它出现在其他地方 <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <link href=

我一直试图将我的导航完全定位在其父div（header>nav>menu）的右下角，我有点迷路了。谢谢你的帮助

我一直在尝试相对定位它的父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;
}








身体{
保证金：自动；
宽度：960px；
}
.标志{
显示：块；
浮动：左；
宽度：242px；
高度：141px；
边际：0px；
}
#标题{
位置：相对位置；
身高：100%；
}
#导航菜单{
位置：绝对位置；
底部：0px；
右：0px；
边际：0px；
填充：0px；
浮动：对；
}
#菜单ul{
列表样式：无；
}
#菜单里{
显示：内联；
浮动：左；
}
#菜单a{
显示：块；
宽度：120px；
字体大小：粗体；
颜色：#FFFFFF；
背景色：#98bf21；
文本对齐：居中；
填充：4px；
文字装饰：无；
文本转换：大写；
}
#菜单a:悬停，a:活动
{
背景色：#7A991A；
}

您在css中定义的

nav

是

标记元素

非

id

或

菜单

是

id

非

类

请更改为您的css并按如下方式定义

更改为此

#nav .menu

进入这个

nav #menu

你犯了一些错误

在css中使用

#header

，但不将id header放入

标记

在css中使用

#nav

而不是nav标记，因为

nav

标记中没有id

#收割台高度为100%。它将采用父级的高度。放置<代码>高度：自动这样它将只需要适合其内容所需的高度


我打了一个手势。请查收。希望这能解决你的问题
我非常感谢您的帮助，但是我尝试了这个方法，它将其移动到屏幕的右下角。也许我需要给它的父div添加高度？这就是我的处境：仍然没有正确地显示出来。我想它在包装纸上方的屏幕上。非常感谢你，bandedKrait！多亏了你，我才明白我在那里做了什么！简单的问题导致复杂的焦虑哈哈。