Css 在“移动视图”中显示一行中的社交图标

在移动视图中，我希望我的社交图标位于行方向（左侧）。在桌面视图中，图标应该位于列的最右侧，我使用float:right实现了这一点，但是我应该如何更改以使它们位于左侧的水平线（内联）中呢？ 这是我的html：

 <div class="socialico">
            <div id="social-test">
                    <ul class="social">
                      <li><a class = "facebook" href="https://www.facebook.com/bay42.io/"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
                      <li><a class = "instagram" href="https://www.instagram.com/bay42.io/"><i class="fa fa-instagram" aria-hidden="true"></a></i></li>
                      <li><a class = "linkedin" href="https://www.linkedin.com/company/bay42-banja-luka/"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
                    </ul>
            </div> <!--social-test div-->
    </div>

此外，以下是我的移动视图css：

.socialico{

            position: relative;
            float:left;
            margin-top: -8%;
            color: #fff;
            animation: slideInRight 1.5s;
           } 
        #social-test ul li{
            display: inline-block;
       }
       .socialico ul li a:hover{  
   color: #C8A962;
   animation: bounceIn 6s;
       }
       .socialico ul li a { 
   color:#fff;
   display: inline-block;

}

---

}

您只需将

ul

显示屏设置为

flex

，并将

flex方向设置为
行

CSS:

让我给你一个建议，去掉浮点数，使用flex：……它将为你的响应速度创造奇迹
.socialico{

            position: relative;
            float:left;
            margin-top: -8%;
            color: #fff;
            animation: slideInRight 1.5s;
           } 
        #social-test ul li{
            display: inline-block;
       }
       .socialico ul li a:hover{  
   color: #C8A962;
   animation: bounceIn 6s;
       }
       .socialico ul li a { 
   color:#fff;
   display: inline-block;

@media only screen and (max-width: 576px) {
  .socialico {
    float: left;
  }
  #social-test ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }
}