Question

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

最初的图片

Image initially

单击复选框后的

和图像

enter image description here

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

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

Answer 1

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

删除显示的css一切正常

DEMO：http://jsfiddle.net/67usZ/

Answer 2

不要使用CSS隐藏在这里，只需在页面上隐藏性别行。

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

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

    });
});

输入类型文本的对齐问题

2 个答案: