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

失去漂浮物。设置＆＃34;右＆＃34;离右边有多远，＆＃34;顶部＆＃34;距离顶部有多远。这就是你所需要的一切。

$('input.minimal')

Answer 2

你需要添加＆＃34;右：0;＆＃34;而不是使用浮动。

<强>例如

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

并修复课程的名称＆＃34; social-icons-rnd ＆＃34;到＆＃34; social-icon-rnd ＆＃34;，因为你使用＆＃34; social-icon-rnd ＆＃34;在div类上（图标中没有S）：

您可以在此处看到它：

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

使用HTML Div图像定位CSS

2 个答案: