Навигационная панель перемещается вниз, когда jQuery animates

Question

Я изучаю HTML/CSS/jQuery в течение последних десяти дней. Я создаю свой первый сайт и стараюсь играть как можно больше.

Я сделал анимацию для своей навигационной панели. Он изменяет color, а font-size - на 2px. Увеличение в font-size приводит к тому, что остальная часть панели навигации выпадает на несколько пикселей. Как я могу это исправить?

Вот jsFiddle of my project.

Анимация:

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

Добавить высоту строки в тегах а. Установите это на любую высшую точку.

Вот обновление к вашей скрипке: 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; 
}