私のソーシャルアイコンがページの中央からロゴを押しています

Question

私はブートストラップとレスを使ってレスポンシブウェブサイトを構築しています。

私はうまく機能している素晴らしいフォントを使用していくつかのソーシャルアイコンを入れました。

しかし、私のロゴは中央にあることを前提としていましたが、私はソーシャルアイコンを入れる前でしたが、今は私のロゴを追加して、私のロゴを左に押しています。

は、ここでの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; } 
} 

私も試してみて、それを中央にページ全体にロゴ250ピクセルを配置しようとしたが、それは動作しません。

私は何か不足している場合は、ごめんなさい申し訳ありませんが、私は本当にこれに新しいですので、ごめんなさい。

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値を調整する必要があるかもしれません。