我刚刚开始编写CSS，我很生气，因为我在标题中的登录表单位于较小的屏幕上的联系我们导航链接下方，然后是我的桌面。谁能告诉我为什么？HTML 和 CSS 如下
.HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="Site Description">
<meta name="keywords" content="Site Keywords">
<title>AffAttraction | Performance Based Marketing Network</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/showcase.js"></script>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1>AffAttraction</h1>
</div>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="advertisers.html">Advertisers</a></li>
<li><a href="publishers.html">Publishers</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</nav>
<div id="login">
<form action="publishers/login.php" method="post">
<input type="email" name="email" placeholder="Email" required>
<input type="password" name="password" placeholder="Password" required>
<button type="submit" class="header_login_btn">Login</button>
</form>
</div>
</div>
</header>
<section id="showcase">
<div class="container">
<h1><span class="highlight">Performance</span> Based Marketing</h1>
<p>AffAttraction will help you make money from your Websites, Apps, Games, and More!</p>
</div>
</section>
</body>
</html>
.CSS
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: : 1.5;
margin: 0;
padding: 0;
background-color: #F4F4F4;
}
/* Global */
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
.header_login_btn {
color: #FFFFFF;
background-color: #00CF03;
width: 70px;
height: 35px;
margin-top: 10px;
border: #00CF03 2px solid;
border-radius: 2px;
}
.header_login_btn:hover {
color: #FFFFFF;
background-color: #42DB4C;
width: 70px;
height: 35px;
margin-top: 10px;
border: #42DB4C 2px solid;
border-radius: 2px;
}
/* Header */
header {
color: #FFFFFF;
background-color: #418DD9;
padding-top: 15px;
min-height: 50px;
}
header a {
color: #FFFFFF;
text-decoration: none;
font-size: 16px;
}
header li {
float: left;
display: inline;
padding-right: 20px;
padding-left: 20px;
}
header #branding {
float: left;
font-weight: bold;
}
header #branding h1 {
margin: 0;
}
header nav {
float: center;
padding-top: 10px;
}
header a:hover {
color: #42DB4C;
}
header #login {
margin-top: -15px;
float: right;
}
header #login input {
height: 25px;
width: 110px;
border: #FFFFFF;
border-radius: 8px;
padding: 5px;
float: none;
}
/* Showcase */
#showcase {
color: #FFFFFF;
min-height: 500px;
background: url('../img/cover.jpg') no-repeat;
text-align: center;
}
#showcase h1 {
margin-top: 100px;
font-size: 50px;
font-weight: bold;
}
#showcase p {
font-size: 30px;
}
#showcase .highlight {
color: #42DB4C;
}
任何帮助不胜感激！
(1(在css文件中，您应该将标题 #login 边距顶部设置为-35px。
header #login {
margin-top: -35px;
float: right;
}(2(使用位置：绝对解决问题
header {
color: #FFFFFF;
background-color: #418DD9;
padding-top: 15px;
min-height: 50px;
position: relative;
}
header #login {
position: absolute;
right: 20px;
transform: translateY(-50%);
}(三(
header {
color: #FFFFFF;
background-color: #418DD9;
padding-top: 15px;
min-height: 50px;
position: relative;
}
header #login {
position: absolute;
top: 50%;
right: 20px;
margin-top: -22.25px;
}