1

私は過去 10 日間、HTML/CSS/jQuery を学んでいます。私は最初のウェブサイトを作成していて、できる限り遊んでいます。

ナビゲーション バーのアニメーションを作成しました。が変化しcolor、font-sizeが 増加し2pxます。の増加font-sizeにより、ナビゲーション バーの残りの部分が数ピクセル下がります。どうすればこれを修正できますか?

これが私のプロジェクトのjsFiddle です。

アニメーション:

$(document).ready(function () {
    $('a').hover(function () {
        $(this).stop().animate({
            "color": "#FFA541",
            "font-size": "25px"
        }, 275);
    }, function () {
        $(this).stop().animate({
            "color": "white",
            "font-size": "23px"
        }, 275);
    });
});
4

2 に答える 2

2 
.navigation ul li a {
    text-decoration: none;
    margin: .2em 1em;
    color: white;
    width: 100px;
    line-height:25px;
}

a タグに line-height を追加します。これを最高点になるように設定します。

フィドルの更新は次のとおりです: http://jsfiddle.net/Lhbys/1/

于 2013-05-21T02:14:17.630 に答える
0

、<li> floatこれを試してみてください: html:

<div class="navigation">
<ul>
    <li><a href="#">Home</a>

    </li>
    <li><a href="#">HTML</a>

    </li>
    <li><a href="#">CSS</a>

    </li>
    <li><a href="#">jQuery</a>

    </li>
    <!-- add this line -->
    <div style="clear: both"></div>
</ul>

CSS:

.navigation ul {
    display: block;
    width: 70%;
    margin: 0 auto;
}

.navigation ul li {
    float: left;
}
于 2013-05-21T03:02:00.473 に答える