HTML Div图像的CSS定位

Question

我正在尝试创建一个在浏览器右上角具有固定位置的社交导航栏。 我的目标是导航栏将水平内联显示。 但是，如果不以某种方式跳转到浏览器的另一侧，我将无法使其水平显示。

        <div class="social-icons-round">
            <div class="social-icon-rnd"><a href="http://www.facebook.com"><img height="34" width="34" src="file://C:\Workspace\Random\Schools\images\facebook-round.png"></a></div>
            <div class="social-icon-rnd"><a href="http://www.twitter.com"><img height="34" width="34" src="file://C:\Workspace\Random\Schools\images\twitter-round.png"></a></div>
            <div class="social-icon-rnd"><a href="http://www.google.com"><img height="34" width="34" src="file://C:\Workspace\Random\Schools\images\g+-round.ico"></a></div>
        </div><!-- end of social-icons-round -->

.social-icons-round {
    position: fixed;
    float: right;
    padding: 5px;
}

.social-icons-rnd {
    display: inline-block;
}

Answer 1

失去浮标。 将“右边”设置为距离右边多远，将“顶部”设置为离顶部多远。 这就是您所需要的。

.social-icons-round {
    position: fixed;
    /*float: right;*/
    top:10px;
    right:20px;
    padding: 5px;
}

Answer 2

您需要添加“ right：0;” 而不是使用float。

例如：

.social-icons-round {
    position: fixed;
    top:0;            // Add this
    right:0;          // Add this
    padding: 5px;
}

并将类“ social-icons-rnd ”的名称固定为“ social-icon-rnd ”，因为您在div类上使用了“ social-icon-rnd ”（图标字中没有S）：

您可以在这里看到它的工作方式：

http://codepen.io/anon/pen/dGNbvp?editors=110