小贝子编程

使用" justify-content: space-between;"时关闭按钮丢失



我正在关注这段yt视频，如何制作一个网站，一切都很好，但在我完成后，当我尝试单击菜单按钮时，在移动视图上，关闭按钮就找不到了？！？！当我移除justify-content: space-between;时，我在css周围玩——按钮回来了，但处于一个尴尬的位置。

这是代码：

@import url("https://fonts.googleapis.com/css2?family=Figtree&display=swap");
* {
box-sizing: border-box;
font: inherit;
color: inherit;
}
body {
font-family: "Figtree", sans-serif;
padding: 0;
margin: 0;
color: #333;
}
p {
max-width: 600;
}
.container {
max-width: 1200px;
padding: 24px;
margin: 0 auto;
display: grid;
grid-template-rows: auto 1fr auto;
height: 100vh;
}
header {
display: flex;
align-items: center;
}
.navigation {
flex-grow: 1;
margin-left: 40px;
}
.nav--item {
text-decoration: none;
color: #887c7c;
margin-left: 24px;
}
.nav--item:first-child {
margin-left: 0;
}
.nav--item--active {
color: #333;
}
.nav--button {
border: none;
background: linear-gradient(
to right top,
#8c1587,
#bb0073,
#da1658,
#ea453a,
#eb6f12
);
padding: 10px 36px;
border-radius: 50px;
color: white;
}
main {
display: flex;
align-items: center;
}
.headline {
font-size: 52px;
font-weight: bolder;
padding: 0;
margin: 0;
}
.description {
color: #585454;
margin: 0;
padding: 0;
margin: 24px 0 40px 0;
}
.play-button {
border: 1px solid #cda6da;
border-radius: 50px;
padding: 10px 36px;
background: transparent;
display: flex;
align-items: center;
background: linear-gradient(to right, #cf17c9 0%, #cf1512 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.play-button .fa-solid{
background: inherit;
font-size: 1.20rem;
margin-right: 6px;
}
.main--content {
flex: 1;
margin: 40px 0 40px 0;
}
.main--img {
flex: 1;
}
.main--img img{
width: 100%;
}
footer{
display: flex;
color: #bdbdbd;
}
.socials{
margin-right: 40px;

}
.socials--items{
margin-right: 12px;
}
.socials--items:hover{
color: #333;
}
.menu-button
{
flex-grow: 1;
display: none;
}
.menu-button button{
border: none;
background-color: transparent;
font-size: 1.5rem;
}
.mobile-nav{
position: fixed;
width: 100vh;
height: 100vh;
background-color: white;
padding: 24px;
display: none;
/* transform: translateX(-100%);
transition: transform 300ms ease-in-out; */
}
.mobile-nav-open
{
transform: translateX(0);
}
.mobile--nav--header{
display: flex;
align-items: center;
justify-content: space-between;

margin-bottom: 40px;
}
#mobile--nav--item--active{
color: #333;
}
.close-button button{
border: none;
background-color: transparent;
font-size: 1.5rem;

}
.mobile--nav--item{
text-decoration: none;
font-size: 1.2rem;
color: #bdbdbd;
display: block;
margin-bottom: 24px;
}
@media only screen and (max-width:660px)
{
main{
display: block;
}
header .logo{
display: none;
}
.navigation{
display: none;
}
.mobile-nav{
display: block;
}
.menu-button{
display: block;
}

}
<!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" />
<link rel="stylesheet" href="style.css" />
<script
src="https://kit.fontawesome.com/84d2ebe131.js"
crossorigin="anonymous"
></script>
<title>Home Page</title>
</head>

<div class="mobile-nav" id="mobile-nav">
<div class="mobile--nav--header">
<img src="/img/Collab..png" alt="logo of the page" class="logo" />
<div class="close-button" onclick="toggleMobileNavigation()">
<button><i class="fa-solid fa-close"></i></button>
</div>
</div>
<a href="#" class="mobile--nav--item " id="mobile--nav--item--active">Home</a>
<a href="#" class="mobile--nav--item">About</a>
<a href="#" class="mobile--nav--item">Services</a>
<a href="#" class="mobile--nav--item">Contact</a>
</div>
<div class="container">
<header>
<img src="/img/Collab..png" alt="logo of the page" class="logo" />
<nav class="navigation">
<a href="#" class="nav--item nav--item--active">Home</a>
<a href="#" class="nav--item">About</a>
<a href="#" class="nav--item">Services</a>
<a href="#" class="nav--item">Contact</a>
</nav>
<div class="menu-button" onclick="toggleMobileNavigation()">
<button><i class="fa-solid fa-bars"></i></button>
</div>
<button class="nav--button">Get Started</button>
</header>
<main>
<div class="main--content">
<h1 class="headline">Lorem ipsum <br />dolor sit.</h1>
<p class="description">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi
soluta officiis quae repellat excepturi iure optio consectetur iste
fuga voluptas.
</p>
<button class="play-button">
<i class="fa-solid fa-circle-play"></i>Discover Video
</button>
</div>
<div class="main--img">
<img src="/img/data-x1.png" alt="people illustration" />
</div>
</main>
<footer>
<div class="socials">
<a href="" class="socials--items">
<i class="fa-brands fa-instagram"></i
></a>
<a href="" class="socials--items">
<i class="fa-brands fa-twitter"></i
></a>
<a href="" class="socials--items">
<i class="fa-brands fa-youtube"></i
></a>
</div>
<span>John Cena</span>
</footer>
</div>
<!--     
<script>
function toggleMobileNavigation()
{
var element = document.getElementById("mobile-nav");
if (element.classList.contains("mobile-nav-open"))
{
element.classList.remove("mobile-nav-open");
}
else
{
element.classList.add("mobile-nav-open");
}
}
</script>
-->
</body>
</html>

您需要将宽度设置为100vw我认为有一个拼写错误，您将视口高度设置为宽度，子div也继承了父div的宽度，最后添加了padding-right以使按钮在屏幕上可见！

function toggleMobileNavigation()
{
var element = document.getElementById("mobile-nav");
if (element.classList.contains("mobile-nav-open"))
{
element.classList.remove("mobile-nav-open");
}
else
{
element.classList.add("mobile-nav-open");
}
}
@import url("https://fonts.googleapis.com/css2?family=Figtree&display=swap");
* {
box-sizing: border-box;
font: inherit;
color: inherit;
}
body {
font-family: "Figtree", sans-serif;
padding: 0;
margin: 0;
color: #333;
}
p {
max-width: 600;
}
.container {
max-width: 1200px;
padding: 24px;
margin: 0 auto;
display: grid;
grid-template-rows: auto 1fr auto;
height: 100vh;
}
header {
display: flex;
align-items: center;
}
.navigation {
flex-grow: 1;
margin-left: 40px;
}
.nav--item {
text-decoration: none;
color: #887c7c;
margin-left: 24px;
}
.nav--item:first-child {
margin-left: 0;
}
.nav--item--active {
color: #333;
}
.nav--button {
border: none;
background: linear-gradient(
to right top,
#8c1587,
#bb0073,
#da1658,
#ea453a,
#eb6f12
);
padding: 10px 36px;
border-radius: 50px;
color: white;
}
main {
display: flex;
align-items: center;
}
.headline {
font-size: 52px;
font-weight: bolder;
padding: 0;
margin: 0;
}
.description {
color: #585454;
margin: 0;
padding: 0;
margin: 24px 0 40px 0;
}
.play-button {
border: 1px solid #cda6da;
border-radius: 50px;
padding: 10px 36px;
background: transparent;
display: flex;
align-items: center;
background: linear-gradient(to right, #cf17c9 0%, #cf1512 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.play-button .fa-solid{
background: inherit;
font-size: 1.20rem;
margin-right: 6px;
}
.main--content {
flex: 1;
margin: 40px 0 40px 0;
}
.main--img {
flex: 1;
}
.main--img img{
width: 100%;
}
footer{
display: flex;
color: #bdbdbd;
}
.socials{
margin-right: 40px;

}
.socials--items{
margin-right: 12px;
}
.socials--items:hover{
color: #333;
}
.menu-button
{
flex-grow: 1;
display: none;
}
.menu-button button{
border: none;
background-color: transparent;
font-size: 1.5rem;
}
.mobile-nav .close-button {
position: absolute;
top:0;
right: 10px;
}
.mobile-nav{
position: fixed;
width: 100vw; /* <- changed */
height: 100vh;
background-color: white;
padding: 24px;
display: none;
position: relative;
/* transform: translateX(-100%);
transition: transform 300ms ease-in-out; */
}
.mobile-nav-open
{
transform: translateX(0);
}
.mobile--nav--header{
width:100%;
display: flex;
align-items: center;
justify-content: space-between; /* <- changed */
position: relative;
width: 100%; /* <- changed */
padding-right: 20px; /* <- changed */
margin-bottom: 40px;
}
#mobile--nav--item--active{
color: #333;
}
.close-button button{
border: none;
background-color: transparent;
font-size: 1.5rem;

}
.mobile--nav--item{
text-decoration: none;
font-size: 1.2rem;
color: #bdbdbd;
display: block;
margin-bottom: 24px;
}
@media only screen and (max-width:660px)
{
main{
display: block;
}
header .logo{
display: none;
}
.navigation{
display: none;
}
.mobile-nav{
display: block;
}
.menu-button{
display: block;
}

}
<!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" />
<link rel="stylesheet" href="style.css" />
<script
src="https://kit.fontawesome.com/84d2ebe131.js"
crossorigin="anonymous"
></script>
<title>Home Page</title>
</head>

<div class="mobile-nav" id="mobile-nav">
<div class="mobile--nav--header">
<img src="/img/Collab..png" alt="logo of the page" class="logo" />
<div class="close-button" onclick="toggleMobileNavigation()">
<button><i class="fa-solid fa-close"></i></button>
</div>
</div>
<a href="#" class="mobile--nav--item " id="mobile--nav--item--active">Home</a>
<a href="#" class="mobile--nav--item">About</a>
<a href="#" class="mobile--nav--item">Services</a>
<a href="#" class="mobile--nav--item">Contact</a>
</div>
<div class="container">
<header>
<img src="/img/Collab..png" alt="logo of the page" class="logo" />
<nav class="navigation">
<a href="#" class="nav--item nav--item--active">Home</a>
<a href="#" class="nav--item">About</a>
<a href="#" class="nav--item">Services</a>
<a href="#" class="nav--item">Contact</a>
</nav>
<div class="menu-button" onclick="toggleMobileNavigation()">
<button><i class="fa-solid fa-bars"></i></button>
</div>
<button class="nav--button">Get Started</button>
</header>
<main>
<div class="main--content">
<h1 class="headline">Lorem ipsum <br />dolor sit.</h1>
<p class="description">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi
soluta officiis quae repellat excepturi iure optio consectetur iste
fuga voluptas.
</p>
<button class="play-button">
<i class="fa-solid fa-circle-play"></i>Discover Video
</button>
</div>
<div class="main--img">
<img src="/img/data-x1.png" alt="people illustration" />
</div>
</main>
<footer>
<div class="socials">
<a href="" class="socials--items">
<i class="fa-brands fa-instagram"></i
></a>
<a href="" class="socials--items">
<i class="fa-brands fa-twitter"></i
></a>
<a href="" class="socials--items">
<i class="fa-brands fa-youtube"></i
></a>
</div>
<span>John Cena</span>
</footer>
</div>
</body>
</html>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium