2017-09-18 2 views
0

私はこの右上を修正しようとしています。つまり、ウィンドウをスクロール、最大化、最小化するときに右上にとどまります。ポジションのようなもの:絶対;トップ:0;右:0; .....私はそれを働かせることができません。あなたは構文を助けることができますか?クラス.socialbtns〜0〜右、上セットで絶対: これを画面の右上に修正しようとしています

@import url('http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'); 


a, a:hover { 
    text-decoration: none; 
} 

.socialbtns, .socialbtns ul, .socialbtns li { 
    margin: 0; 
    padding: 5px; 
} 

.socialbtns li { 
    list-style: none outside none; 
    display: inline-block; 
} 

.socialbtns .fa { 
    width: 40px; 
    height: 28px; 
    color: #576267; 
    background-color: transparent; 
    border: 1px solid #000; 
    padding-top: 12px; 
    border-radius: 22px; 
    -moz-border-radius: 22px; 
    -webkit-border-radius: 22px; 
    -o-border-radius: 22px; 
} 

.socialbtns .fa:hover { 
    color: #FFF; 
    background-color: #576267; 
    border: 1px solid #000; 
} 



</style> 
+0

を働く参照するには、以下の 実行スニペット。私たちには[mcve]が必要です。また、あなたの引用符を見てください。 Ex '" ' – j08691

+0

@ j08691編集が行われました。 –

答えて

5

あなたのアンカータグはよく一緒に入れて、CSSの位置を使用していなかった、以下のように

<div align="center" class="socialbtns"> 
<ul> 
<li><a href="http://…..” target="_blank" class="fa fa-lg fa-linkedin"></a> 
</li> 
<li><a href="https://......target="_blank" class="fa fa-lg fa-facebook"></a> 
</li> 
<li><a href="http://…..” target="_blank" class="fa fa-lg fa-twitter"></a></li> 
<li><a href="https://….” target="_blank" class="fa fa-lg fa-google-plus"></a> 
</li> 
</ul> 
</div> 

CSSです。それはあなたのCSSを投稿

.socialbtns { 
 
      position: absolute; 
 
      right: 0; 
 
      top: 0; 
 
      margin-right: 15px; 
 
     } 
 

 
     li { 
 
      list-style: none; 
 
      display: inline; 
 
      margin: 5px; 
 
     } 
 
     a {text-decoration: none;}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="socialbtns"> 
 
     <ul> 
 
      <li><a href="http://….." target="_blank" class="fa fa-lg fa-linkedin"></a></li> 
 
      <li><a href="https://..." target="_blank" class="fa fa-lg fa-facebook"></a></li> 
 
      <li><a href="http://…" target="_blank" class="fa fa-lg fa-twitter"></a></li> 
 
      <li><a href="https://…." target="_blank" class="fa fa-lg fa-google-plus"></a></li> 
 
     </ul> 
 
    </div>

関連する問題