css - 在移动 View 中连续显示社交图标

Question

我希望我的社交图标在移动 View 中处于行方向(左侧)。在桌面 View 中，图标应该位于一列的最右侧，我使用 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: right;
             margin-top: -8%;
             color: #fff;
             animation: slideInRight 1.5s;
            } 
         #social-test ul li{
             padding-bottom: 10px;
        }
        .socialico ul li a:hover{  
    color: #C8A962;
    animation: bounceIn 6s;
        }
        .socialico ul li a { 
    color:#fff;
}

此外，这是我的移动 View 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;

}

Answer 1

您需要做的就是将 ul 显示设置为 flex 并将 flex-direction 设置为 row.

CSS:

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