centre animé (largeur variable) div - Lien inclus

Question

J'ai une barre d'évaluation animée qui change de largeur quand vous passez la souris dessus.

J'ai essayé d'écrire une explication du problème, mais je pense qu'il est beaucoup plus facile d'examiner le lien. Essentiellement, j'ai de la difficulté à centrer un div car les divs enfants changent de taille lorsque la souris passe au-dessus d'eux. J'ai essayé d'animer la largeur de la div parent en même temps mais sans succès.

http://degreeshowcase.com/test3.html

Answer 1

viens de vérifier vos codes: faire

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

maintenant la position div wrap cette div avec un autre div

Answer 2

Une alternative à la méthode Praveen Prasads:

I remarquez que vous placez chaque enfant div à une largeur de 20px, mais à tout moment, un seul peut être plus que cela (26px). La largeur que vous avez définie sur le div parent est 210px. Chaque enfant div, à l'exception du premier, a une bordure de 1px.

Ainsi, la largeur totale maximale de tous les enfants divs est élaboré comme suit:

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. 

largeur totale minimum de tous les enfants divs est élaboré comme suit:

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. 

La solution: Essayez de définir la largeur de la div parent à 215px ou plus. Cela devrait résoudre le problème.