我正在尝试制作一个带有登录表单的网页。登录表单组件放置在 <div> 内的表格中元素;一切都完成了，但现在我面临调整大小的问题:每当我调整浏览器大小时，表格元素一直在移动，看起来不太好......
如果我调整浏览器的宽度或高度(或两者，对 Angular 线方向)，我希望登录表单固定不变。
接下来可以看到我的HTML模板代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<title>GIETINF | Management</title>
<script type="text/javascript" src="scripts/onClick.js"></script>
</head>
<body>
<div id="box">
<form method="POST" action="login.php">
<table>
<tr>
<td align="right"><p id="text">E-mail:</p></td>
<td align="left">
<input type="text" name="email" value="user@server.pt" onFocus="this.value=''">
</td>
</tr>
<tr>
<td align="right"><p id="text">password:</p></td>
<td align="left"><input type="password" name="password"></td>
</tr>
<tr>
<table id="little_box">
<tr>
<td align="left"><input type="submit" value="Log In"></td>
</tr>
<tr>
<td align="left" colspan="2"><input type="reset" value="Reset values"></td>
</tr>
</table>
</tr>
</table>
</form>
<table id="little_box2">
<tr>
<td align="left"> <input type="submit" onClick="OpenEmailtoadmin()" value="Register"></td>
</tr>
</table>
</div>
</body>
</html>
还有这个页面的 CSS:
body
{
background-image:url('../images/logo.jpg');
background-repeat:no-repeat;
background-position: 20% 0%;
background-attachment: fixed;
background-color: #3A4147;
background-size: fixed;
}
input[type="text"] {
border: 2px solid #F7921F;
background: #ffffff;
color:#969999;
}
input[type="password"] {
border: 2px solid #F7921F;
background: #ffffff;
color:#969999;
}
input[type="submit"] {
background: #341243;
border: 2px solid black;
color:#F7921F;
}
input[type="submit"]:hover {
border: 2px solid black;
filter:alpha(opacity=50);-moz-opacity:.5;opacity:.5;
background: #FFFFFF;
color: #000000;
}
input[type="submit"]:focus {
border: thin #000000 solid;
background: #FFFFFF;
color: #000000;
}
input[type="submit"]:focus:hover {
border: thin #000000 solid;
filter:alpha(opacity=100);-moz-opacity:1;opacity:1;
background: #FFFFFF;
color: #000000;
}
input[type="reset"] {
background: #341243;
border: 2px solid black;
color:#F7921F;
}
input[type="reset"]:hover {
border: 2px solid black;
filter:alpha(opacity=50);-moz-opacity:.5;opacity:.5;
background: #FFFFFF;
color: #000000;
}
input[type="reset"]:focus {
border: thin #000000 solid;
background: #FFFFFF;
color: #000000;
}
input[type="reset"]:focus:hover {
border: thin #000000 solid;
filter:alpha(opacity=100);-moz-opacity:1;opacity:1;
background: #FFFFFF;
color: #000000;
}
#registration_button {
background: #341243;
border: 2px solid black;
color:#F7921F;
}
#registration_button:hover {
border: 2px solid black;
filter:alpha(opacity=50);-moz-opacity:.5;opacity:.5;
background: #FFFFFF;
color: #000000;
}
#registration_button:focus {
border: thin #000000 solid;
background: #FFFFFF;
color: #000000;
}
#registration_button:focus:hover {
border: thin #000000 solid;
filter:alpha(opacity=100);-moz-opacity:1;opacity:1;
background: #FFFFFF;
color: #000000;
}
#box
{
position: absolute;
width: 50%;
height: 30%;
left: 50%;
top: 35%;
}
#little_box
{
position: relative;
width: 20%;
height: 10%;
left: 15.4%;
top: 35%;
}
#little_box2
{
position: relative;
width: 20%;
height: 10%;
left: 24.4%;
top: 35%;
}
#box_error
{
position: relative;
width: 50%;
height: 30%;
left: 39%;
top: 65%;
}
#text
{
font-family:arial;
color:white;
font-size:14px;
}
很抱歉文本太长；我看到其他类似的问题已解决，但我似乎没有从中得到很好的解决方案。 提前致谢!
最佳答案
#box{
height: 30%;
left: 50%;
margin-left: -100px;
position: absolute;
top: 35%;
width: 200px;
}
关于DIV 元素中的 HTML 表格随着浏览器调整大小而不断移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25605198/