Question

有一个社交菜单，我需要一直浮动到我的页面右侧并保持固定。然而，它在某种程度上随机漂浮。只是寻找可能的解决方案

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

只需使用以下代码更改.social的属性即可。我也和你分享经验。每当我遇到这种问题时。我尝试使用border，它有助于看到内容浮动。

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

 }

Div没有完全浮动到右边

2 个答案: