0

我创建了一个网站，但遇到了问题，我无法单击登录字段集中页面上的某些字段（或按钮）。我只需单击注册字段集中的字段（或按钮）即可。

我对 CSS 使用 LESS，但如果你不懂这种语言，你也能理解。

我的错误在哪里？

HTML 代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />

        <script type="text/javascript" src="http://localhost/Website/scripts/jQuery.js"></script>

        <link rel="stylesheet/css" type="text/css" href="http://localhost/Website/styles/reset.css">
        <link rel="stylesheet/less" type="text/css" href="http://localhost/Website/styles/style.less">
        <script src="http://localhost/Website/scripts/less.js" type="text/javascript"></script>


        <title>Ushahidi self-help</title>
    </head>

    <body>
        <div id="masterContent">
            <div id="connectPanel">
        <form id="loginForm" method="post" action="">
        <fieldset>
            <legend>Login</legend>

            <table>
            <tr>
                <td><label for="email_login">Email</label></td>
            </tr>
            <tr>
                <td><input type="email" name="email_login" id="email_login" maxlength="45" /></td>
            </tr>
            <tr>

                <td><label for="password_login">Password</label></td>
            </tr>
            <tr>
                <td><input type="password" name="password_login" id="password_login" maxlength="45" /></td>
            </tr>
            <tr>
                <td><input type="submit" value="Login" /></td>
            </tr>

            <tr>
                <td><a href="http://localhost/Website/page/register">Sign up</a></td>
            </tr>
            </table>
        </fieldset>
    </form>
</div><div id="content"><form id="formRegistration" method="post" action="">
        <fieldset>
            <legend>Register</legend>

        <table>
        <tr>
            <td><label for="lastName_register">Last Name :</label></td>
            <td><input type="text" name="lastName_register" id="lastName_register" maxlength="45" /></td>
            <td id="errorLastName_register" style="display:none;">Error</td>
        </tr>
        <tr>
            <td><label for="firstName_register">First Name :</label></td>

            <td><input type="text" name="firstName_register" id="firstName_register" maxlength="45" /></td>
            <td id="errorFirstName_register" style="display:none;">Error</td>
        </tr>
        <tr>
            <td><label for="email_register">Email :</label></td>
            <td><input type="email" name="email_register" id="email_register" maxlength="45" /></td>
            <td id="errorEmail_register" style="display:none;">Error</td>

        </tr>
        <tr>
            <td><label for="password_register">Password :</label></td>
            <td><input type="password" name="password_register" id="password_register" maxlength="45" /></td>
            <td id="errorPassword_register" style="display:none;">Error</td>
        </tr>
        <tr>
            <td><label for="confirmPassword_register">Confirm Password :</label></td>

            <td><input type="password" name="confirmPassword_register" id="confirmPassword_register" maxlength="45" /></td>
            <td id="errorConfirmPassword_register" style="display:none;">Error</td>
        </tr>
        <tr>
            <td><input type="submit" value="Register" /></td>
        </tr>
        </table>
    </fieldset>

</form>
<script type="text/javascript" src="http://localhost/Website/connection/register_script.js"></script> </div>        </div>
    </body>
</html>

少代码：

body
{

    #masterContent
    {
        width: 80%;
        margin: auto;

        #connectPanel
        {
            width: 20%;
            float: left;
            margin-right: 2%;
        }

        #content
        {
            width: 100%;
            position: relative;
        }
    }
}
4

1 回答 1

1

您的元素#content 与#connectPanel 重叠，因此您只需将其向左边缘多一点

#content
{
    width: 100%;
    position: relative;
    margin-left: 20%;
}

在这里看到jsfiddle

于 2012-04-23T12:31:02.507 回答