Div不完全浮動到右側

Question

有一個社交菜單，我需要將其一直浮動到我的頁面右側並保持固定。然而，它隨機浮動在某處。只是尋找一個可能的修復

這裏是小提琴：http://jsfiddle.net/m7vaywmh/

HTML

<div class="social_wrap"> 
    <div class="social"> 
     <a href="https://www.linkedin.com/profile/view?id=387766698&trk=nav_responsive_tab_profile" target="_blank"><img class="move" src="images/linked.png"/></a> 
     <a href="https://www.behance.net/lukerbab3a51" target="_blank"><img class="move" src="images/behance.png"/></a>     
     <a href="http://factordog.deviantart.com/" target="_blank"><img class="move" src="images/deviant.png"></a> 
     <a href="https://www.youtube.com/channel/UCMM-HzbbBtU6DhNlUL71rrQ" target="_blank"><img class="move" src="images/yt.png"/></a> 
     <a href="https://www.facebook.com/LukebMedia?sk=timeline&app_data" target="_blank"><img class="move" src="images/fb.png"/></a>      
    </div><!--social -->  
</div> 

CSS：

.social_wrap{ 
    background:#3F3; 
    width:100%; 
    height:60px; 
    position:fixed; 
    z-index:5001; 
} 
.social{ 
    position:relative; 
    float:right; 
    width:45%; 
    right:0px; 
    margin-top:15px; 

} 
.social img{ 
    width:5%; 
    min-width:15px; 
    padding-right:10px; 
} 

Answer 1

你有困難寬度您.social類，默認情況下text-align離開了。

添加text-align: right到.social

.social_wrap{ 
 
    background:#3F3; 
 
    width:100%; 
 
    height:60px; 
 
    position:fixed; 
 
    z-index:5001; 
 
} 
 
.social{ 
 
    position:relative; 
 
    float:right;  
 
    width:45%; 
 
    right:0px; 
 
    text-align: right; 
 
    margin-top:15px; 
 

 
} 
 
.social img{ 
 
    width:5%; 
 
    min-width:15px; 
 
    padding-right:10px; 
 
}

<div class="social_wrap"> 
 
     <div class="social"> 
 
      <a href="https://www.linkedin.com/profile/view?id=387766698&trk=nav_responsive_tab_profile" target="_blank"><img class="move" src="images/linked.png"/></a> 
 
      <a href="https://www.behance.net/lukerbab3a51" target="_blank"><img class="move" src="images/behance.png"/></a>     
 
      <a href="http://factordog.deviantart.com/" target="_blank"><img class="move" src="images/deviant.png"></a> 
 
      <a href="https://www.youtube.com/channel/UCMM-HzbbBtU6DhNlUL71rrQ" target="_blank"><img class="move" src="images/yt.png"/></a> 
 
      <a href="https://www.facebook.com/LukebMedia?sk=timeline&app_data" target="_blank"><img class="move" src="images/fb.png"/></a>      
 
     </div><!--social -->  
 
    </div>

Answer 2

只是改變.social性能與下面的代碼。我也和你分享我的經驗。每當我有這樣的問題。我嘗試使用邊框，它有助於看到內容浮動。

.social { 
    position:relative; 
    float:right; 
    width:45%; 
    right:0px; 
    margin-top:15px; 
    text-align:right; 
    padding-right:15px; 

}