中心動畫（可變寬度）div - 包含鏈接

Question

我有一個動畫評級欄，當您將鼠標放在它上面時，它會改變寬度。

我試圖寫一個問題的解釋，但我認爲看看鏈接要容易得多。

從根本上說，當鼠標懸停在它們上方時，我無法將div作爲兒童div的更改大小進行居中。我曾嘗試在同一時間動畫父div的寬度，但沒有成功。

http://degreeshowcase.com/test3.html

Answer 1

只是檢查你的代碼：這樣做

#ratebar { 
font-size:14px; 
font-weight:bold; 
margin:50px auto; 
width:auto;/*change this*/ 
} 

現在定位的div包裹這個div一些其他分區

Answer 2

到普利文Prasads還有另外一種方法：

我請注意，您將每個div div設置爲20px的寬度，但是在任何時候只有一個可以超過該值（26px）。你在父div上設置的寬度是210px。除第一個div外，每個div都有1px的邊框。

因此，所有孩子的div被制定出的最大總寬度如下：

9 * 20 = 180 //standard div width 
1 * 26 = 26 //hovered div width 
9 * 1 = 9 //border 
Total: 215 
215 is more than 210 so the last one drops down. 

最低所有孩子的div的總寬度是制定如下：

10 * 20 = 200 //standard div width 
9 * 1 = 9 //border 
Total: 209 
209 is less than 210 so the last one stays on the same line as the rest. 

解決方案：嘗試設置父div的寬度爲215px或更多。這應該可以解決問題。