화면의 오른쪽 상단으로 수정하려고 시도합니다.

Question

이 오른쪽 상단을 수정하려고합니다. 즉, 스크롤, 최대화 및 최소화 할 때 오른쪽 상단에 위치합니다. 위치와 같은 것 : 절대적; 상단 : 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> 

Answer 1

앵커 태그가 함께 잘 넣고 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입니다. 아래 실행 조각은

.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>