我正在制作一个下拉导航菜单,当我将显示设置为无时,其中一个列表项占用空间。当高于 1100 像素时,“预订餐桌”项目不应显示在中心 div 中,而当低于 1100 像素时,应显示在下拉菜单中。我在 chrome 上使用了检查元素,有一条绿线,该项目仍然存在。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown Menu</title>
<link href="styles.css" rel="stylesheet">
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<header class="header">
<div class="toggle-button" onclick="myFunction();">
<span class="bar1"></span>
<span class="bar2"></span>
<span class="bar3"></span>
</div>
<div class="logo">
<a href="index.html"><img src="darklogo.png" alt=""></a>
</div>
<nav id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#" class="bookatabledd">Book A Table</a></li>
</ul>
</nav>
<div class="bookatable">Book A Table   ></div>
</header>
<script src="main.js"></script>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
header {
display: flex;
text-align: center;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 5px 60px;
background-color: #212223;
position: relative;
}
.logo img {
width: 190px;
}
.bookatabledd {
display: none;
}
nav ul li {
display: inline-block;
padding: 5px 25px;
}
nav ul li a{
display: inline-block;
font-weight: bold;
font-size: 20px;
list-style-type: none;
}
nav ul li a:hover {
color: rgb(174, 17, 174);
}
nav ul li a{
text-decoration: none;
display: inline-block;
color: white;
font-weight: 600;
}
.toggle-button{
width: 35px;
position: absolute;
right: 40px;
top: 45px;
display: none;
cursor: pointer;
}
.toggle-button span {
display: inline-block;
width: 100%;
height: 2px;
background-color: white;
float: left;
margin-bottom: 8px;
}
.bookatable {
color: #fff;
background-color: #555556;
border-radius: 6px;
text-transform: uppercase;
font-weight: 600;
font-size: 18px;
line-height: 1;
text-align: center;
padding: 9px 6px 8px 8px;
transition-duration: 0.6s;
transition-timing-function: ease-in-out;
letter-spacing: -.3px;
cursor: pointer;
}
.bookatable:hover {
cursor: pointer;
background-color: #909092;
color: white;
}
/* ---- BREAKPOINTS ---- */
@media (max-width: 1100px) {
header {
display: flex;
flex-direction: column;
text-align: center;
position: relative;
justify-content: space-between;
padding: 5px 20px 5px;
}
.logo {
align-self: flex-start;
}
.toggle-button{
display: block;
}
nav{
display: none;
width: 100%;
border-top: 1px solid white;
padding-top: 20px 0;
margin-top: 30px;
}
nav ul li{
padding: 15px 0px;
width: 100%;
}
nav ul {
text-align: center;
}
nav.show{
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.bookatable {
display: none;
}
.bookatabledd {
display: block;
}
}
您的 CSS 文件包含:
nav ul li{
padding: 15px 0px;
width: 100%;
}
这意味着即使包含“预订餐桌”项目的元素也有其填充,即使其子元素未显示,也会占用导航栏中的空间。
这是正确的代码:
li#hidden {
padding: 0;
}
// Make sure you give it padding when the page is below 1100px wide
@media (max-width: 1100px) {
// ...
li#hidden {
padding: 15px;
}
}
<nav id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<!-- The item below must not have padding -->
<li id ="hidden"><a href="#" class="bookatabledd">Book A Table</a></li>
</ul>
</nav>