JQuery UI position（）问题与包含跨度的div中的div

Question

我还是JQuery UI的新手。我想将<div>包含的链接（在<span>中实现）与另一个<div>对齐。以下是我的HTML中的<div>定义：

<div id='TOP'>
    <div id='TOP_LEFT'><img src="images/Logo_150x50.png"></div>
    <div id='TOP_MID'><select id="ffonts"></select></div>
    <div id='TOP_RIGHT'>
        <div id="LOGIN_LINKS">
            <span id="login">Login</span>&nbsp;&nbsp;
            <span id="registr">Registration</span><br />
            <span id="forgotpwd">Forgot Password</span>&nbsp;&nbsp;
            <span id="logout">Logout</span>
        </div>
    </div>
</div>

我尝试使用position（）方法如下（在文档就绪中）：

$("#"+LOGIN_LINKS).position({
    my: "center bottom",
    at: "center bottom",
    of: "#"+TOP_RIGHT
});

但我的链接未在底部对齐。

为什么呢？我做错了什么？

修改

执行更多测试后，当我在每个范围之后放置<br />时，不会发生此问题：

<div id="LOGIN_LINKS">
    <span id="login">Login</span><br />
    <span id="registr">Regist</span><br />
    <span id="forgotpwd">Forgot Password</span>
    <!-- span id="logout">Logout</span -->
</div>

这对我来说似乎是个错误!!!

Answer 1

似乎jsfiddle发布了一些问题，但这是一个工作版本：

http://jsfiddle.net/xb4Rf/1/

基本上我看到的主要问题是容器（TOP_RIGHT）没有高度，所以它已经在底部。更改高度可以按预期移动子项。如果你想级联代码似乎比添加中断更复杂，但可以完成。