jquery - 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;
}

---

编辑：解释一下，我猜这是因为当你为元素设置动画时，jQuerydisplay将block. 所以你最终在一个block元素 (the <a>) 里面有一个inline元素 (the <li>) 不起作用。

通过使用float:left，<li>保留其block显示，这使其有效<a>为block。