Question

我目前正在为游戏服务器设计一个新的服务器 - 客户端界面，并且偶然发现了一个问题，即我的div个类之一对内容没有任何影响。

site is live (http://crysis-or.eu/)和HTML / PHP＆amp;可以查看CSS。

<div class="tableenc">试图产生影响的具体内容是表格;我试图将桌子向左移动，但是桌子没有移动。

我尝试了一些方法，例如在<div class="tableenc">之外移动<body>（显然修改了CSS的相关部分），但没有任何效果。

我做错了什么？

问题代码：

PHP / HTML：

<body>
    <div class="tableenc">
            <table class="login" width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
                <tr>
                    <form name="form1" method="post" action="checklogin.php">
                        <td>
                            <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
                                <tr>
                                    <td colspan="3"><strong><font color="#265CFF"><h2>Login to Crysis Wars Server Portal</h2></font></strong></td>
                                    </tr>
                                <tr>
                                    <td width="78"><font color="#265CFF">Username</font></td>
                                    <td width="6"><font color="#265CFF">:</font></td>
                                    <td width="294"><input name="myusername" type="text" id="myusername"></td>
                                </tr>
                                <tr>
                                    <td><font color="#265CFF">Password</font></td>
                                    <td><font color="#265CFF">:</font></td>
                                    <td><input name="mypassword" type="text" id="mypassword"></td>
                                </tr>
                                <tr>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td><input type="submit" name="Submit" value="Login"></td>
                                </tr>
                            </table>
                        </td>
                    </form>
                </tr>
            </table>
        </div>
</body>

CSS：

body {
    width:100%;
    margin-left:-0px;
    background:url("../img/pgbg.jpg") repeat-x;
}
body > table {
    position:absolute;
}

body > .tableenc {
    margin-right:70px;
}

Answer 1

您的HTML标记对任何版本的HTML都无效。您不能像这样在表格标记的中间放置表单标记。您的浏览器可能会容忍错误并尽可能地调整标记。这很可能是您的显示设置没有达到预期效果的原因。我会指向W3 Validator作为检查代码符合性的方法，以便将来可以避免此问题。如果您修复了标记，那些样式可能会以您期望的方式开始工作。

Answer 2

对于简单的表格来说，这是很多工作。你可以从一个更简单的基础开始，看看是否有助于你移动它。

Have a fiddle!

HTML

<form id="login" name="form1" method="post" action="checklogin.php">
    <legend>Login to Crysis Wars Server Portal</legend>
    <label for="myusername">Username</label>
    <input name="myusername" type="text" id="myusername" />
    <label for="mypassword">Password</label>
    <input name="mypassword" type="text" id="mypassword" />
    <input type="submit" name="Submit" value="Login" />
</form>

CSS

#login {
    width: 300px;
}
#login legend {
    color: #265CFF;
    font-size: 2em;
}
#login input {
    float: left;
    display: block;
    margin: 20px 0 0;
}
#login label {
    float: left;
    width: 100px;
    clear: left;
    margin: 20px 0 0;
}
#login input[type=submit] {
    clear: left;
}

Answer 3

是的，创建一个实现form，label和input标签使用的容器div会更加实用。

Div未对内容产生任何影响

3 个答案: