jQuery 就地反弹

Question

我需要我的列表项元素在适当的位置弹跳，而不是相互覆盖。

我创建了一个 JSFiddle 的意思:http://jsfiddle.net/RGvjj/

有人可以告诉我元素为什么会那样做以及我需要做些什么来解决这个问题吗？

Answer 1

尝试删除 inline显示来自 <li>并使用 float:left相反。

尝试一下: http://jsfiddle.net/RGvjj/1/

#navigation li {
    font-size: 20px;
    margin-left: 10px;
    padding-left: 10px;
    border-left: 3px solid #1161A5;
    color: #ffffdd;
    text-decoration: none;
    float:left;
}

---

编辑:解释一下，我猜这是因为当您为元素设置动画时，jQuery 会更改 display至 block .所以你最终得到了 block <a> 中的元素(inline)元素(<li>)不起作用。

通过使用 float:left , <li>保留其 block显示，这使得它对 <a> 有效成为block .