如何解决如何更改菜单以在CSS中堆叠?
我正在尝试为网站创建响应菜单。我希望菜单项彼此堆叠,就像移动网站上的大多数下拉菜单一样。我不确定是什么使我的内容对齐变形或对齐。我想摆脱多余的空间,以使每个项目在另一个之上对齐。 当前,它看起来像这样:
我的目标是:
代码 https://codepen.io/curiousoddity/pen/ExKrVry
HTML
<body>
<header>
<div class="container">
<div id="homepage">
<h1> Tim David</h1>
</div>
<div id="menu">
<nav>
<ul>
<li><a href="#about">About </a></li> <!--have links go to part of the page-->
<li><a href="#my-works">Gallery</a></li>
<li><a href="#container">Contact</a></li>
</ul>
</nav>
</div>
<section id="featured">
<h2>Nature Lover & Adventure Seeker </h2>
<p> Lorem ipsum dolor sit amet,consectetur adipiscing elit.</p>
</section>
CSS
header{
min-height: 900px;
width: 100%;
background: linear-gradient(0deg,rgba(0,0.29850746268656714) 0%,0.30298507462686564) 100%),url(./sharad-bhat-Photo\ by\ Sharad\ Bhat\ on\ Unsplash.jpg);
background-size: cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
header #homepage{
font-family: helvetica;
font-size: 20px;
margin-top: 20px;
font-weight: 100;
text-decoration: none;
text-transform: uppercase;
padding: 20px 40px 20px 40px;
float: left;
header #menu{
float: right;
header li{
float: left;
display: inline;
margin-top: 30px;
padding: 20px 60px 20px 20px;
font-family: helvetica;
cursor: pointer;
letter-spacing: 1.5px;
header a{
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
ul{
margin:0;
padding:0;
#featured{
color: #ffffff;
justify-content: center;
text-align: center;
padding-top: 500px;
#featured h2{
font-family: Arial;
font-size: 30px;
text-transform: uppercase;
font-weight: 500;
#featured p{
font-family: arial;
font-size: 20px;
line-height: 1.5;
@media(max-width: 768px){
header #homepage,header #menu{
margin: 0;
width: 100%;
position: fixed;
}
header #homepage {
background: white;
}
nav{
width: 100%;
background: white;
position: absolute;
margin-top: 125px;
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
}
nav ul{
background: white;
}
nav a{
color: black;
}
}
解决方法
您将flex属性放在nav
元素而不是子元素ul
上。只需将其添加到您现有的CSS中即可:
nav ul {
background: white;
display: flex;
flex-direction: column;
}
如果需要,可以从父nav
元素中删除flex元素。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。