如何使用HTML与CSS实现网站头部（header）的图标对齐？

问题修复方案 #

问题根因 #

共有3个核心错误导致效果不符合预期：

• HTML结构嵌套错误，social-links被放在了contact-info内部，无法实现左右分栏对齐
• 类名拼写错误d-flec应为d-flex，导致flex布局不生效
• 多余的padding属性撑爆了topbar固定高度，导致元素溢出

1. 修改HTML代码 #

<!-- ======= Top Bar ======= -->
<section id="topbar" class="d-flex align-items-center">
    <div class="container d-flex justify-content-center justify-content-md-between">
        <div class="contact-info d-flex align-items-center">
            <i class="fa fa-envelope d-flex align-items-center"><a href="mailto:contact@example.com">contact@example.com</a></i>
            <i class="fa fa-map-marker d-flex align-items-center ms-4"><a href="#">1 Avenue, London, AB12 0AB</a></i>
            <i class="fa fa-phone d-flex align-items-center ms-4"><span>123 456 78900</span></i>
        </div>
        <div class="social-links d-flex align-items-center">
            <a href="#"><i class="fa fa-twitter"></i></a>
            <a href="#"><i class="fa fa-instagram"></i></a>
            <a href="#"><i class="fa fa-facebook-square"></i></a>
        </div>
    </div>
</section>

修改点说明：

• 修正类名拼写错误d-flec为d-flex
• 将social-links调整为contact-info的同级元素，实现左右分栏
• 调整Font Awesome图标写法，将<i>放在<a>内部，避免点击区域异常

2. 修改CSS代码 #

/* ==============================
========== G L O B A L ========== 
============================== */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* =============================
========= T O P  B A R =========
============================= */
#topbar{
    height: 30px;
    width: 100%;
    background-color: #313030;
    color: white;
    font-size: 14px;
    font-family: 'Noto Sans JP', sans-serif;
    transition: all 0.3s;
    padding: 0 10px;
}

#topbar .contact-info i a, #topbar .contact-info i span{
    padding-left: 5px;
    color: #A1B82B; 
    font-family: 'Noto Sans JP', sans-serif;
    text-decoration: none;
}

#topbar .contact-info i a{
    line-height: 1;
    transition: 0.3s;
    color: #A1B82B;
}

#topbar .contact-info i:hover{
    text-decoration: underline;
}

#topbar .social-links{
    margin-right: 30px;
    gap: 8px;
}

#topbar .social-links a{
    color: white;
    transition: 0.3s;
    text-decoration: none;
}

#topbar .social-links a:hover{
    color: #909090;
    cursor: pointer;
}

修改点说明：

• 移除#topbar .contact-info i a的多余padding:30px属性，避免撑爆容器
• 给social-links添加margin-right:30px，实现距离右侧向内30px的需求
• 移除#topbar多余的padding-top:5px，依靠flex垂直居中实现对齐

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