Question

在移动视图中，我希望我的社交图标在行方向（在左侧）。在桌面视图中，图标应位于一列的最右侧，而我使用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;
}

另外，这是我的移动视图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;
  }
}

在移动视图中连续显示社交图标

1 个答案: