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。