菜单没有出现在标题区域 html/css 中？答案

【问题标题】：Menu does not come in header area html/css?菜单没有出现在标题区域 html/css 中？
【发布时间】：2021-09-05 19:50:24
【问题描述】：

嗨，我是学习 html/css 的新学生。我正在创建页面布局，但我的菜单链接位于页眉区域而不是页眉中。我不知道为什么？我需要这方面的帮助。此外，您会看到我创建了一个宽度为 30% 的侧边栏并写了一个段落行，但它没有显示。当我将侧边栏 html 代码放在 Header div 中时，我的侧边栏文本将显示并且它将在菜单下开始。我正在努力理解事情，请帮助我。谢谢这是我的代码

.wrapper{
    width: 1000px;
    height: 1000px;
    background-color: rgb(62, 231, 20);
    margin: auto;
    margin-top: -20px;
    color: rgb(255, 6, 6);
}

.header{
    height: 100px;
    width: 1000px;
    background-color: rgb(208, 255, 0);
    /* margin-bottom: 100px; */
    position: absolute;
}

.logo img{
    width: 100px;
    height: 100px;
    cursor: pointer;
    padding-left: 20px;
}

.menu{
    /* margin-top: -80px; */
    padding-left: 300px;
    /* height : 100px; */
    /* align-items: center; */
}


.menu ul li{
    padding: 10px ;
    display: inline-block;
    text-align: center;
    font-size: 16px;
}

.menu ul li a:link{
    color :rgb(6, 10, 255);
    text-decoration:none;
}

.menu ul li a:visited{
    color: rgb(224, 16, 161);
}

.menu ul li a:hover{
    color: black;
}

.menu ul li a:active{
    color:blueviolet;
}

.leftsidebar {
    width : 30%;
    height: 900px;
    color: rgb(224, 211, 211);
    background-color: rgb(133, 21, 105);
    /* float: left; */
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Layout Div</title>
    <link rel="stylesheet" href="/21-06-2021 practice.html/stylesheet.css">
</head>
<body>
    <div class="wrapper">
        <div class="header">
            <div class="logo">
                <img src="/My Practice Assignment-Div/images/logo1-removebg-preview.png" alt="logo">    
            </div>

            <nav class="menu">
                <ul>
                    <li><a href="https://www.google.com">Home</a></li>
                    <li><a href="https://www.facebook.com">About</a></li>
                    <li><a href="https://www.google.com">Contact</a></li>
                </ul>
            </nav>
         
        </div> 
        
        <div class="leftsidebar">
            <p> This is for sidebar area</p>
        </div>
        
    </div>
</body>
</html>

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

菜单链接显示正常，请再次检查。

位置：绝对；

从 css .header 类中删除它，p 文本将显示。正确使用float属性一切显示正常，尝试在.wrapper.header中使用%而不是px

【讨论】：

【解决方案2】：

你只需要添加位置

.menu{
/* margin-top: -80px; */
position: absolute;
top:-25%;
left:10%;

/* height : 100px; */
/* align-items: center; */

}

.leftsidebar {
width : 30%;
height: 900px;
color: rgb(224, 211, 211);
background-color: blueviolet;
position: relative;
top:10%;
/* float: left; */

}

【讨论】：