调整大小时垂直导航栏与主体重叠？
我对编码不到 6 个月还很陌生，正在开发我的第一个付费网站，但遇到了一个问题，我真的不知道如何解决。谢谢您的帮助。我已经尝试过设置边距，但 CSS 很棘手，所以也许我做得不够，我真的不知道如何解决
.login-page{
width: 360px;
padding: 10% 0 0;
margin: auto;
}
.form{
position: relative;
z-index: 1;
background: rgba(0,0,0,0.5);
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
border-radius: 25px;
}
.header-logo{
width: 100%;
max-width: 300px;
height: auto;
}
.header{
text-align: right;
float: right
}
ul {
list-style-type: none;
margin: 15px;
padding: 0;
width: 300px;
background-color: rgba(160, 143, 70, 0.4);
font-family: "Roboto", sans-serif;
border-radius: 25px;
text-align: center;
font-size: 20px;
}
li a {
display: block;
color: #ffffff;
padding: 8px 16px;
text-decoration: none;
}
<body>
<div class="header">
<img src="header-logo.png" class="header-logo">
<ul>
<li><a href="#home">Home</a></li>
<br>
<li><a href="#news">Store</a></li>
<br>
<li><a href="#contact">Contact</a></li>
<br>
<li><a href="#about">About</a></li>
</ul>
</div>
<div class="login-page">
<div class="form">
<form class="register-form">
<h1 class="register-header">Register</h1>
<input type="text" placeholder="Username">
<input type="text" placeholder="Email">
<input type="text" placeholder="Password">
<button>Create</button>
<p class="message">Already Registered? <a href="#">Log-in</a></p>
</form>
<form class=:login-form>
<h1 class="login-header">Log-In</h1>
<input type="text" placeholder="Username">
<input type="text" placeholder="Password">
<button>Log-in</button>
<p class="message">Not Registered? <a href="#">Register</a></p>
</form>
</div>
</div>
1回答
-
慕后森
您可以clear:both在移动模式下将其用于登录 div。这是由于.login-page你给margin:auto它集中的div 。.login-page{ width: 360px; padding: 10% 0 0; margin: auto;}.form{ position: relative; z-index: 1; background: rgba(0,0,0,0.5); max-width: 360px; margin: 0 auto 100px; padding: 45px; text-align: center; border-radius: 25px;}.header-logo{ width: 100%; max-width: 300px; height: auto;}.header{ text-align: right; float: right}ul { list-style-type: none; margin: 15px; padding: 0; width: 300px; background-color: rgba(160, 143, 70, 0.4); font-family: "Roboto", sans-serif; border-radius: 25px; text-align: center; font-size: 20px;}li a { display: block; color: #ffffff; padding: 8px 16px; text-decoration: none;}@media(max-width:767px){.login-page{clear: both;}}<div class="header"> <img src="header-logo.png" class="header-logo"> <ul> <li><a href="#home">Home</a></li> <br> <li><a href="#news">Store</a></li> <br> <li><a href="#contact">Contact</a></li> <br> <li><a href="#about">About</a></li> </ul> </div> <div class="login-page"> <div class="form"> <form class="register-form"> <h1 class="register-header">Register</h1> <input type="text" placeholder="Username"> <input type="text" placeholder="Email"> <input type="text" placeholder="Password"> <button>Create</button> <p class="message">Already Registered? <a href="#">Log-in</a></p> </form> <form class=:login-form> <h1 class="login-header">Log-In</h1> <input type="text" placeholder="Username"> <input type="text" placeholder="Password"> <button>Log-in</button> <p class="message">Not Registered? <a href="#">Register</a></p> </form> </div> </div>00
相关分类