我希望我的列表项元素可以在原地弹跳而不会互相碰撞。
我创建了一个 JSFiddle 演示了我所说的内容: http://jsfiddle.net/RGvjj/
请问有谁能指导我为什么这些元素会这样,并告诉我需要怎么做才能解决这个问题吗?
<li>
的inline
显示方式移除,并改用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
。因此,您最终得到的是一个块级
元素(<a>
)位于一个内联
元素(<li>
)中,这是不起作用的。
通过使用float:left
,<li>
保留其块级
显示,这使得<a>
成为有效的块级
元素。