图标（A href标签）不显示在行方向（水平线）

Question

请问为什么我的图标没有排列成一行尽管div 属性设置为flex。另请注意，图标嵌入在标签中。这是代码 HTML

<div class="social-media">
        <a href="#"><i class='bx bxl-twitter'></i></a>
        <a href="#"><i class='bx bxl-facebook-circle'></i></a>
        <a href="#"><i class='bx bxl-instagram-alt'></i></a>
        <a href="#"><i class='bx bxl-linkedin'></i></a>
        </div>  
        <a href="#" class="btn">Download CV</a>
    </div>
    <div class="main-img">
        <img id="img" src="../Images/person.jpg" alt="">
    </div>

CSS .social-media{

text-decoration:  none;
    border: 3px solid #0ef;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    display: flex;
    padding: 10px;
    color: #0ef;
    background: transparent;
    transition: 0.5s;
    width: 40px;
    height: 40px;
    font-size: 20px;
/*  margin: 0 25px 0 0;*/
}
.social-media a:hover{
    background-colour: #0ef;
    colour: #1f242d;
}
.social-media{
    width: 50%;
    padding: 20px 0;
}

我运行了代码，但它显示在这样的列中 但我希望图标显示在同一行

Answer 1

您的锚标签（徽标）不知道从哪里过渡，因为您没有给出起始位置和结束位置。你需要使用 transition:translateX(.,.) 在水平轴上移动你的对象。

搜索 Flexbox 教程！