jquery - jQuery动画时导航栏向下移动

Question

过去十天我一直在学习 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);
    });
});

Answer 1

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

将行高添加到 a 标签。将此设置为最高点。

这是您的小提琴的更新：http: //jsfiddle.net/Lhbys/1/

Answer 2

制作<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;
}