Question

我正在尝试使用登录表单生成一个网页。登录表单组件放在<div>元素内的表中;这一切都已完成，但现在我正面临调整大小的问题：每当我调整浏览器大小时，表格元素都会继续移动，看起来不太好...... 我希望修复登录表单，如果我在宽度或高度（或两者，对角线）调整浏览器大小，请不要四处移动。

我的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;
}

我很抱歉长文;我看到这样的其他问题已经解决，但我似乎没有从中得到一个很好的解决方案。提前谢谢！

Answer 1

    #box{
        height: 30%;
        left: 50%;
        margin-left: -100px;
        position: absolute;
        top: 35%;
        width: 200px;
    }

Answer 2

因为你的桌子没有宽度：

   <table style="width:1000px;">
         <tr>
             <td style="width:20%"></td>
             <td style="width:20%"></td>
             <td style="width:20%"></td>
             <td style="width:20%"></td>
             <td style="width:20%"></td>
         </tr>
   </table>

随着浏览器调整大小，DIV元素中的HTML表不断移动

2 个答案: