我对编码不到6个月还很陌生，并且正在我的第一个付费网站上工作，但遇到了一个问题，我真的不确定如何解决。谢谢您的帮助。我已经尝试过设置边距，但是CSS很棘手，所以也许我做得不够，我真的不确定如何解决
This is what the page looks like when down sizedThis is what the page looks like at regular size
.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>
您可以在移动模式下将其用作登录div的clear:both。这是由于div .login-page在其中给了margin:auto以使其集中。
.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>