將一個段落懸停使列表項移動到一側

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