如何制止這種刺激性的CSS行爲

Question

這裏是一個的jsfiddle鏈接：http://jsfiddle.net/qrzwD/

我只是不喜歡我的第二個立在動畫完成後向上移動。

有人可以幫我阻止這件事。

這裏是我的html：

<nav> 
    <ul> 
     <li> <a class="content-box-blue" href="#"> </a> </li> 
     <li> <a class="content-box-gray" href="#"> </a> </li> 
    </ul> 
</nav> 

這裏是我的CSS：

* { 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 
} 
a { 
text-decoration: none; 
margin: 0; 
padding: 0; 
} 
ul, li, nav { 
margin: 0; 
padding: 0; 
} 
nav { 
float: right; 
width: 400px; 
margin-top: 35px; 
margin-right: 10px; 
} 
nav ul { 
list-style-type: none; 
float: right; 
} 
nav li { 
float: right; 
clear: right; 
margin-bottom: 20px; 
} 
.content-box-blue { 
background-color: #00bfff; 
border: 1px solid #afcde3; 
height: 50px; 
width: 0px; 
border-top-left-radius: 8% 50%; 
border-bottom-left-radius: 8% 50%; 
text-align:center; 
line-height:50px; 
} 
.content-box-gray { 
background-color: #FF69B4; 
border: 1px solid #bdbdbd; 
height: 50px; 
width: 0px; 
border-top-left-radius: 12% 50%; 
border-bottom-left-radius: 12% 50%; 
text-align:center; 
line-height:50px; 
} 

這裏是我的jQuery代碼：

$(function(){ 
    $(".content-box-blue").animate({width:'350px'},1200,function(){$('<span>Charcoal Paintings</span>').fadeIn(1000).appendTo($(this));}); 

    $(".content-box-gray").animate({width:'250px'},1200,function(){$('<span>Sketches</span>').fadeIn(2000).appendTo($(this));}); 

}); 

Answer 1

設置高度上李代替的：

li {height:50px;} 

http://jsfiddle.net/qrzwD/3/

新追加的一個正使李改變整體高度

Answer 2

您可以通過添加鋰元素的靜態height: 50px到您的一般nav li -selector除了A-解決這個選擇。

但是，我不能解釋它爲什麼會這樣表現。

Answer 3

它可以通過兩種。內容盒藍色和。內容盒灰色設置display:block來解決

fiddle here

Answer 4

請嘗試此處

nav li a{ 
    display:block; 
} 

鏈接http://jsfiddle.net/qrzwD/4/