我正在尝试使我的表单响应 css，因为当我调整大小时它们会重叠。我试过用表格划分页面，但还是不行。
这是我的 html 和代码:
<html>
<head>
<title>Login Page</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header class="header">
<h1 id="text" href="#a">Institutional Review Board </h1> <h4 id="text"> Ashesi</h4>
</header>
<div class="div">
<fieldset class="section">
</fieldset>
<fieldset class="section2">
<h1 id="text" style="font-size: 40px;"> Welcome to the Ashesi IRB. </h1>
<h2 id="text"> Sign In and Apply to Gain Permission to use Human Subjects In Your Research Work...</h2>
</fieldset>
</div>
<form action='userlogin.php' method='GET'>
<fieldset class="account-info">
<label>
ID
<input type="text" name="id" required>
</label>
<label>
Password
<input type="password" name="password" required>
</label>
</fieldset>
<fieldset class="account-action">
<input class="btn" type="submit" name="submit" value="Login">
<div class="change_link">
Not a member yet?
<a href="usersadd.php" >Join Now</a>
</div>
</fieldset>
</form>
</body>
</html>
这是我的 CSS 代码:
form {
margin-bottom: 22px;
border: 1px solid #c6c7cc;
border-rzadius: 5px;
font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
overflow: hidden;
width: 240px;
position: absolute;
top: 30%;
left: 70%;
}
#text
{
color:white;
text-align: left;
font-weight: bold;
display: inline;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
fieldset {
padding: 20px 20px 0 20px;
border:0;
margin: 0;
padding: 0;
}
.header
{
text-align: left;
height= 400px;
background: linear-gradient(#CC0000 , #990000);
padding:5px;
border:1px solid #CCC;
margin:0px auto;
}
.div{
background-image: url("day.jpg");
height:570px;
background-attachment: fixed;
background-attachment: fixed;
}
input {
border-radius: 5px;
font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0;
}
.section{
padding :20px 20px 0 20px;
font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
width: 500px;
height:400px;
background-color: #C0C0C0;
border: 1px solid black;
opacity: 0.5;
float: center;
position: absolute;
top: 20%;
left: 15%;
}
.section2{
padding :20px 20px 0 20px;
font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
width: 500px;
height:400px;
float: center;
position: absolute;
top: 20%;
left: 15%;
}
.account-info {
padding: 20px 20px 0 20px;
background: linear-gradient(#49708f, #293f50);
}
.account-info label {
color: #ffffff;
display: block;
font-weight: bold;
margin-bottom: 20px;
}
.account-info input {
background: #fff;
border: 1px solid #c6c7cc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
color: #636466;
padding: 6px;
margin-top: 6px;
width: 100%;
}
.account-action {
background: #F8F8F8 ;
border-top: 1px solid #c6c7cc;
padding: 20px;
}
.account-action .btn {
background: linear-gradient(#49708f, #293f50);
border: 0;
color: #fff;
cursor: pointer;
font-weight: bold;
float: right;
padding: 8px 16px;
}
.account-action label {
color: #7c7c80;
font-size: 12spx;
float: left;
margin: 10px 0 0 20px;
}
.change_link{
color: #395870;
display: block;
font-weight: bold;
margin-bottom: 20px;
}
最佳答案
这是我给你的两分钱。
首先，您的 css 在声明高度时出错。
这是HTML
<html>
<head>
<title>Login Page</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<header class="header">
<h1 id="text" href="#a">Institutional Review Board </h1> <h4 id="text">Ashesi</h4>
</header>
</div>
<div class="div" style="position: relative;">
<fieldset class="section">
</fieldset>
<fieldset class="section2">
<h1 id="text" style="font-size: 40px;"> Welcome to the Ashesi IRB. </h1>
<h2 id="text"> Sign In and Apply to Gain Permission to use Human Subjects In Your Research Work...</h2>
</fieldset>
</div>
<div>
<form action='userlogin.php' method='GET'>
<fieldset class="account-info">
<label>ID
<input type="text" name="id" required>
</label>
<label>Password
<input type="password" name="password" required>
</label>
</fieldset>
<fieldset class="account-action">
<input class="btn" type="submit" name="submit" value="Login">
<div class="change_link">
Not a member yet?
<a href="usersadd.php" >Join Now</a>
</div>
</fieldset>
</form>
</div>
</body>
</html>
CSS:
fieldset {
padding: 20px 20px 0 20px;
border: 0;
margin: 0;
padding: 0;
}
.header {
text-align: left;
height: 100px;
background: linear-gradient(#CC0000, #990000);
padding: 5px;
border: 1px solid #CCC;
margin: 0px auto;
}
.div {
background-image: url("day.jpg");
height: 570px;
background-attachment: fixed;
}
input {
border-radius: 5px;
font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0;
}
.section {
padding: 20px 20px 0 20px;
font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
width: 500px;
height: 400px;
background-color: #C0C0C0;
border: 1px solid black;
opacity: 0.5;
float: center;
position: absolute;
top: 20%;
left: 15%;
}
.section2 {
padding: 20px 20px 0 20px;
font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
width: 500px;
height: 400px;
float: center;
position: absolute;
top: 20%;
left: 15%;
}
.account-info {
padding: 20px 20px 0 20px;
background: linear-gradient(#49708f, #293f50);
}
.account-info label {
color: #ffffff;
display: block;
font-weight: bold;
margin-bottom: 20px;
}
.account-info input {
background: #fff;
border: 1px solid #c6c7cc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
color: #636466;
padding: 6px;
margin-top: 6px;
width: 100%;
}
.account-action {
background: #F8F8F8;
border-top: 1px solid #c6c7cc;
padding: 20px;
}
.account-action .btn {
background: linear-gradient(#49708f, #293f50);
border: 0;
color: #fff;
cursor: pointer;
font-weight: bold;
float: right;
padding: 8px 16px;
}
.account-action label {
color: #7c7c80;
font-size: 12spx;
float: left;
margin: 10px 0 0 20px;
}
.change_link {
color: #395870;
display: block;
font-weight: bold;
margin-bottom: 20px;
}
问题是你的 div 的位置是静态的，它被我覆盖为相对的，这更有意义，因为你要让它响应。
如果您真的想让您的网站具有响应性，我强烈建议您使用类似 bootstrap 的工具。
关于html - 我的 html 表单和元素重叠并使我的页面不直观，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36321105/