0

我正在处理一个带有 html 和 jquery 的示例，我现在最初面临一个小的对齐问题，当单击复选框时它正在完美对齐。看看快照。

最初的图像

最初的图像

单击复选框后的图像

在此处输入图像描述

这是我的html文件

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="signin.css">
<title>First sample</title>
 <script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">

</script>
<script type="text/javascript">
$(document).ready(function() {
    $("#check1").click(function() {

        $("#passwordRowId").toggle();
        $("#genderRowId").toggle();

    });
});
</script>


</head>
<body>


<table bgcolor="#FFFFFF" align="center">

    <tr id="checkboxRowId">
        <td colspan="2" align="center"><input type="checkbox"
            id="check1" />check1</td>
    </tr>
    <tr id="userNameRowId">
        <td>UserName :</td>
        <td><input type="text" name="username"></td>
    </tr>
    <tr id="passwordRowId">
        <td>Password :</td>
        <td><input type="password" name="password"></td>
    </tr>





    <tr id="genderRowId">
        <td>Select Gender :</td>
        <td><select name="gender">
                <option>male</option>
                <option>female</option>
        </select></td>
    </tr>

    <tr>
        <td colspan="2" align="center"><input id="signIn" type="button"
            value="Sign In"></td>
    </tr>
</table>

并且链接的css文件是

@CHARSET "ISO-8859-1";

#passwordRowId {
display: block;
}

#genderRowId {
display: none;
}

所以现在我的问题是如何正确对齐第一个布局。提前致谢

4

2 回答 2

2

简单的答案是不要display: block用于表格元素。

删除显示的css一切正常

演示：http: //jsfiddle.net/67usZ/

于 2012-12-23T18:51:19.073 回答
1

不要使用 CSS 来隐藏这里，只需在准备好的页面上隐藏 Gender 行。

$(document).ready(function() {
    $("#genderRowId").toggle();
    $("#check1").click(function() {

        $("#passwordRowId").toggle();
        $("#genderRowId").toggle();

    });
});
于 2012-12-23T19:01:14.980 回答