如何修改CSS让社交媒体联系方式从纵向堆叠改为横向并排展示

你仅需调整CSS代码即可实现联系方式横向并排的效果，无需修改现有HTML结构，修改后的完整CSS代码如下：

.contact .title::after{
    content: "";
}
.contact .contact-content .text{
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}
.contact .contact-content .left p{
    text-align: justify;
}
/* 给父容器icons添加flex布局，实现子元素横向排列 */
.contact .contact-content .left .icons{
    margin: 10px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 30px; /* 可自行调整各个联系方式之间的间距 */
    justify-content: flex-start;
}
/* 调整每个联系方式块的样式 */
.contact .contact-content .row{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    width: fit-content;
}

.contact .contact-content .row .info{
    margin: 10px 0 0 0;
    text-align: center;
}
.contact .contact-content .row i{
    font-size: 25px;
    color: #9933FF;
}
.contact .contact-content .info .head{
    font-weight: 500;
}
.contact .contact-content .info .sub-title{
    color: #333;
}

如果你希望图标和对应的文字保持横向排列（而非图标在上文字在下），只需删除.contact .contact-content .row下的flex-direction: column属性，再将.contact .contact-content .row .info的margin属性改回margin-left: 15px即可。

内容的提问来源于stack exchange，提问作者coder28