如何使jQuery UI对话框始终包含在特定DIV中？

Question

我正在使用jQuery UI对话框。对话框的HTML本身位于 li 标记中，因此可以与 li 对齐。

问题在于，当我单击调用对话框的按钮时，对话框的HTML不再位于 li 标记内，因此它不与其对齐。它似乎是我网站中DIV最高的孩子。

如何将其锚定到 li ？

提前致谢。

代码示例：

$('#login-dialog').dialog({
    autoOpen : false,
    resizable : false,
    draggable : false,
    width : 400

});
$('#login').click(function(event) {
    event.preventDefault();
    $('#login-dialog').dialog('open');
});

HTML：

                    <li id="loginBox">
                         <a href="#" id="login">Login</a>
                         <div id="login-dialog" title="Login to Townflicks">
                            <form method="post" action="http://${pageContext.request.serverName}/http">
                                <input type="email" name="j_username"/><br/>
                                <input type="password" name="j_password"/><br/>
                                <input type="checkbox" name="remember"/> Remember me
                                <a href="/forgotpassword">Forgot password</a><br/>
                                <input type="submit" value="Login &gt;&gt;"/>
                            </form>
                        </div>
                    </li>