Question

我正在使用Bootstrap和Less。

构建一个响应式网站

我已经使用字体真棒放入了一些社交图标，效果很好。

然而，我的徽标意味着在中心，在我放入社交图标之前，但现在我添加了它们，他们将我的徽标推向左边。

这是html

<header> 
    <div id="social"> 
        <ul class="pull-right"> 
             <li><a href="#"><i class="fa fa-facebook-official fa-2x"></i></a></li>
             <li><a href="https://twitter.com/mytwitter"><i class="fa fa-twitter fa-2x"></i></a></li>
             <li><a href="#"><i class="fa fa-linkedin-square fa-2x"></i></a></li>
             <li><a href="#"><i class="fa fa-google-plus-square fa-2x"></i></a></li>
        </ul> 
    </div>
 <div class = "logomove">
    <div id="logo" class="text-center">
        <a href="/"><img src="assets/images/logo.png" alt="Logo" /></a>
    </div>
   </div>
</header>

CSS：

#social {
li {list-style: none; display: inline-block; padding:3px; float:right; color:@brand-primary; } 
 }

我还尝试将徽标250px放在页面上以尝试居中但不起作用。

任何建议都非常感谢，如果我遗失了什么，我真的很陌生。

Answer 1

#social元素的静态定位正在推动徽标。你必须使它们中的任何一个绝对，以使它不影响另一个元素。

试试这样：

header{
    position:relative;
}
#social {
    li {
        list-style: none;
        display: inline-block;
        padding:3px;
        float:right;
        color:@brand-primary;
        position:absolute;
        right:0px;
        top:0px;
    } 
}

您可能需要调整top和right值。

我的社交图标正在将我的徽标推离页面中心

1 个答案: