将无序列表的每 2 个元素放在一行上

Question

我有这个无序列表，在屏幕宽度较小的手机上，我想将每 2 个项目放在一行上，我该如何实现？ 提前谢谢。

<a href="mailto:[e-mail]" class="footer_link">
[e-mail]
</a>
<ul class="social_list">
<li class="social_list_item"> <a class="social_list_item_link" href="https://www.facebook.com/samtshouman">
<i class="fab fa-facebook"></i>
</a>
</li>
<li class="social_list_item"> <a class="social_list_item_link" href="https://github.com/SamShouman">
<i class="fab fa-github">
</i> 
</a> </li>
<li class="social_list_item"> <a class="social_list_item_link" href="https://instagram.com/sam_shmn98?igshid=1k437cycqmauk">
<i class="fab fa-instagram"></i> 
</a> 
</li>
<li class="social_list_item"> <a class="social_list_item_link" href="https://api.whatsapp.com/send?phone=96103943517&source=&data=&app_absent=">
<i class="fab fa-whatsapp"></i>
</a> 
</li>
</ul>

Answer 1

您可以执行此类操作，当屏幕尺寸减小时，它将包装最后 2 个项目。

.social_list {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.first,
.second {
display: flex;
padding: 10px;
}
.first li,
.second li {
margin: 15px;
}

<a href="mailto:[e-mail]" class="footer_link">
[e-mail]
</a>
<ul class="social_list">
<div class="first">
<li class="social_list_item">
<a class="social_list_item_link" href="https://www.facebook.com/samtshouman">
<i class="fab fa-facebook"></i>Facebook
</a>
</li>
<li class="social_list_item">
<a class="social_list_item_link" href="https://github.com/SamShouman">
<i class="fab fa-github">GitHub
</i>
</a>
</li>
</div>
<div class="second">
<li class="social_list_item">
<a class="social_list_item_link" href="https://instagram.com/sam_shmn98?igshid=1k437cycqmauk">
<i class="fab fa-instagram"></i> Instagram
</a>
</li>
<li class="social_list_item">
<a class="social_list_item_link" href="https://api.whatsapp.com/send?phone=96103943517&source=&data=&app_absent=">
<i class="fab fa-whatsapp"></i>Whatsapp
</a>
</li>
</div>
</ul>

Answer 2

只需要添加宽度：50%; 浮点数：左;到具有适当媒体查询的.social_list_item类。小宽度屏幕的示例。

参考这个 ： https://www.w3schools.com/css/css_rwd_mediaqueries.asp

/* You need to add suitable media queries for mobile devices. */
@media screen and  (max-width: 480px) {
li.social_list_item {
width: 50%;
float: left;
}
}

<a href="mailto:[e-mail]" class="footer_link">
[e-mail]
</a>
<ul class="social_list">
<li class="social_list_item"><a class="social_list_item_link" href="https://www.facebook.com/samtshouman">
<i class="fab fa-facebook"></i>
</a>
</li>
<li class="social_list_item"><a class="social_list_item_link" href="https://github.com/SamShouman">
<i class="fab fa-github">
</i>
</a></li>
<li class="social_list_item"><a class="social_list_item_link"
href="https://instagram.com/sam_shmn98?igshid=1k437cycqmauk">
<i class="fab fa-instagram"></i>
</a>
</li>
<li class="social_list_item"><a class="social_list_item_link"
href="https://api.whatsapp.com/send?phone=96103943517&source=&data=&app_absent=">
<i class="fab fa-whatsapp"></i>
</a>
</li>
</ul>