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。