将一个段落悬停使列表项移动到一侧

Question

每当我将鼠标悬停在#email上时，所有社交图标都向左移动一部分。想法是使用定位：固定或浮动。我想这样做，图标保持不变，但#email仍然徘徊。

这里是代码 - http://codepen.io/anon/pen/jyubq

#header ul li { 
width:48px; 
height:48px; 
margin-left:15px; 
margin-top: 5px; 
display:inline-block; 
background-color:#000000; 
padding:0; 
text-align: center; 

} 
#google{ 
width:48px; 
height:48px; 
border-radius: 50%/50%; 
background-image:url('images/googleplus.png'); 
display:block; 
} 
#facebook{ 
width:48px; 
height:48px; 
border-radius: 50%/50%; 
background-image:url('http://bradsknutson.com/wp-content/themes/bradsknutson/images/facebook-48circle.png'); 
display:block; 
} 
#twitter{ 
width:48px; 
height:48px; 
border-radius: 50%/50%; 
background-image:url('http://www.gmailnotifier.se/img/icon_twitter.png'); 
display:block; 
} 
#header ul li#google{ 
background-color:#d34836; 
transition:background-color; 
transition-duration:0.17s; 
} 
#header ul li#google:hover{ 
background-color:#c23725; 
} 
#header ul li#facebook{ 
background-color:#3b5998; 
transition:background-color; 
transition-duration:0.17s; 
} 
#header ul li#facebook:hover{ 
background-color:#2a4887; 
} 
#header ul li#twitter{ 
background-color:#2447B2; 
transition:background-color; 
transition-duration:0.17s; 
} 
#header ul li#twitter:hover{ 
background-color:#1F3D99; 
} 

#email { 
float: right; 
margin-right: 5px; 
padding-top: 5px; 
font-size: 16px; 
font-family: Verdana, sans-serif; 
color: #ffffff; 
} 
#email:hover { 
font-weight: bold; 
} 

Answer 1

你的字体变得更大。并且填充从更大的字体（粗体）计算，而不是常规。 我可以告诉你this。当您悬停时，出现text-shadow: 0px 0px 2px #000;而不是font-weight:bold;。

Answer 2

我觉得敌意的回答是好，但如果你想使用的字体重量：大胆的，那么你必须绝对位置它http://codepen.io/anon/pen/jqyzs

#email{ 
position:absolute; 
right:0; 
margin-right: 5px; 
padding-top: 5px; 
font-size: 16px; 
font-family: Verdana, sans-serif; 
color: #ffffff; 
}