Question

我有一个大脑放屁。如果以前已经回答过这个问题，我很抱歉，但我真的不懂开发人员的语言，所以我不知道该输入什么。

我已经建立了自己的社交图标，它将位于屏幕右侧。目前，我为每个图标使用一个单独的类，其高度为：数字vh;使它们堆叠在上面。我确定这不是正确的方法。有人能指出我正确的方向吗？

这是我目前的代码：

＆＃13;

.fa-facebook {
  background: purple;
  opacity: 0.5;	
  color: white !important;
border: 2px solid white;	
}

.fa-twitter {
  background: purple;
  opacity: 0.5;
  color: white !important;
border: 2px solid white;		
}
/*social*/
.fa-social {
  padding: 10px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 0;
  position: fixed;
  right: 10px;	
}
  p.social {
  position: fixed;
  right: 13px;
  top:30vh;
  text-align: center;
 font-weight: 800;	  
	}	
	.fa-social-1{
    top:35vh;
	}
	.fa-social-2{
    top:45vh;
	}

.fa:hover {
    opacity: 0.9;
}

＆＃13;

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        

<a style="text-decoration: none;" target="_blank" class="fa fa-social fa-social-1 fa-facebook"></a>
<a style="text-decoration: none;" target="_blank" class="fa fa-social fa-social-2 fa-twitter"></a>

＆＃13;

Answer 1

您可以使用flexbox。它会清理你的大部分css。

<div class="social-group">
  <a style="text-decoration: none;" target="_blank" class="fa fa-social fa-social-1 fa-facebook"></a>
  <a style="text-decoration: none;" target="_blank" class="fa fa-social fa-social-2 fa-twitter"></a>
</div>

的CSS ..

     /* Only CSS */

.fa-facebook, .fa-twitter {
  background: purple;
  opacity: 0.5; 
  color: white !important;
  border: 2px solid white;  
  padding: 10px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 0;
}
  /* Extra CSS */

  .social-group {
    display: flex;
    justify-content: flex-end;
    margin-top: 30vh;
  }

.fa:hover {
    opacity: 0.9;
}

工作示例

https://jsfiddle.net/khvrLyon/

Answer 2

最好不要单独使用固定位置 - 最好将它们放在容器中，放置它并让浏览器处理布局。

.fa-facebook {
  background: purple;
  opacity: 0.5;	
  color: white !important;
border: 2px solid white;	
}

.fa-twitter {
  background: purple;
  opacity: 0.5;
  color: white !important;
border: 2px solid white;		
}
/*social*/
.fa-social {
  padding: 10px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 0;
  right: 10px;	
}
.fa:hover {
    opacity: 0.9;
}
#social-container{
    position:fixed;
    right:0;
    top:35vh;
    display:flex;
    flex-direction:column;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        

<div id="social-container">
    <a style="text-decoration: none;" target="_blank" class="fa fa-social fa-social-1 fa-facebook"></a>
    <a style="text-decoration: none;" target="_blank" class="fa fa-social fa-social-2 fa-twitter"></a>
</div>

Answer 3

您需要在标签中添加填充，这是一个示例：

   <a style="text-decoration: none; padding-bottom: 10px" target="_blank" 
   class="fa fa-social fa-social-1 fa-facebook"></a>

   <a style="text-decoration: none; padding-top: 10px" target="_blank" 
   class="fa fa-social fa-social-2 fa-twitter"></a>

如果这不起作用，请尝试：

 <div class="container" style="padding-bottom: 10px;">
 <a style="text-decoration: none;" target="_blank" class="fa fa-social fa- 
 social-1 fa-facebook"></a>
 </div>

 <div class="container" style="padding-top: 10px;">
 <a style="text-decoration: none;" target="_blank" class="fa fa-social fa-
 social-2 fa-twitter"></a>
 </div>

如何堆叠社交图标

3 个答案: