我目前正在做一个网站元素，但是我在开发它的时候遇到了一些问题。基本上，现在我正在尝试创建一个登录页面。我在网络中遇到了一个很常见的错误，这让一切变得丑陋和调整浏览器大小时移动。
之前: enter image description here
之后:enter image description here
/* Bordered form */
form {
margin-left: 220px;
margin-right: 220px;
background-position: top center;
}
body{
background-image: url("/images/background.jpeg");
background-position: top center;
min-width:450px;
max-width:960px;
}
/* Full-width inputs */
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
background-position : top center;
}
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
/* Center the avatar image inside this container */
.imgcontainer {
padding-top: 60px;
position: relative;
left: 17%;
top: 200%;
width: 150%;
text-align: center;
font-size: 18px;
}
/* Avatar image */
img.avatar {
text-align: center;
width: 40%;
border-radius: 50%;
display: block;
margin-left: auto;
margin-right: auto;
}
/* Add padding to containers */
.container {
padding: 20px;
margin-left: 232px;
margin-right: 200px;
min-width:450px;
max-width:960px;
}
/* The "Forgot password" text */
span.psw {
float: right;
padding-top: 16px;
}<!DOCTYPE HTML>
<head>
<link rel="stylesheet" type="text/css" href="login.css" media="screen" />
<title>Admin Panel</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<body>
<div id = form >
<form action="action_page.php">
<div class="imgcontainer">
<img src="/images/treasure.jpeg" alt="Avatar" class="avatar">
</div>
<div class="container">
<label><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<input type="checkbox" checked="checked"> Remember me
<span class="psw"><a href="#">Forgotten password?</a></span>
</div>
</form>
</div>
</body>我贴的下面的代码是我到现在写的代码。我感觉这个问题真的很小很愚蠢，但我就是看不出来。我知道有很多主题与此类似，但是我花了 2 个小时浏览答案，我没有找到任何有用的东西。希望你能帮助我 :)
最佳答案
你应该编码响应
示例
/* Bordered form */
form {
max-width: 500px;
background-position: top center;
margin: 0 auto;
}
body {
background-image: url("/images/background.jpeg");
background-position: top center;
}
/* Full-width inputs */
input[type=text],
input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
background-position: top center;
}
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
/* Center the avatar image inside this container */
/* Avatar image */
img.avatar {
text-align: center;
width: 40%;
border-radius: 50%;
display: block;
margin-left: auto;
margin-right: auto;
}
/* Add padding to containers */
/* The "Forgot password" text */
span.psw {
float: right;
padding-top: 16px;
}<!DOCTYPE HTML>
<head>
<link rel="stylesheet" type="text/css" href="login.css" media="screen" />
<title>Admin Panel</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="container">
<div class="row">
<form action="action_page.php">
<div class="imgcontainer">
<img src="/images/treasure.jpeg" alt="Avatar" class="avatar">
</div>
<div class="form">
<label><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<input type="checkbox" checked="checked"> Remember me
<span class="psw"><a href="#">Forgotten password?</a></span>
</div>
</form>
</div>
</div>
</body>关于html - CSS & HTML 移动元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42346250/