Question

过去十天我一直在学习HTML / CSS / jQuery。我正在创建我的第一个网站并尝试尽可能多地玩游戏。

我为导航栏制作了动画。它会更改color，font-size会增加2px。 font-size的增加导致导航栏的其余部分下拉几个像素。我该如何解决这个问题？

动画：

$(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;
}

当jQuery动画时，导航栏向下移动

2 个答案: