如何对齐网站上的图标 header？ (CSS + HTML)

Question

所以，最近我一直在为我的课程学习一些编码。

我尝试了一些想法，目前我正在制作这个顶部 header（“顶部栏”），作为 mini-header 刚好在实际 header 之上，显示一些额外的信息。

不幸的是，我是一个编码菜鸟，我无法弄清楚这段代码中出了什么问题。如果你运行它，你会看到右边的社交媒体图标（我使用的是 Font Awesome）不在 header 中，很难把它们放在那里。它们应该与左侧的元素对齐（就高度而言，在顶部栏的中间，从右侧向内 30px）。

我玩过 padding、margin、align 和许多其他东西，但我就是想不通。有帮助吗？

HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Noto+Sans+JP&family=Salsa&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>TestWeb</title>
</head>


<body>

    <!-- ======= 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"><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 class="social-links d-flec align-items-center">
                <i class="fa fa-twitter d-flex align-items-center"><a href="#"></a></i>
                <i class="fa fa-instagram d-flex align-items-center"><a href="#"></a></i>
                <i class="fa fa-facebook-square d-flex align-items-center"><a href="#"></a></i>
            </div>
            </div>
        </div>
    </section>

</body>


</html>

CSS 代码：

/* ==============================
========== G L O B A L ========== 
============================== */

*{
    margin: 0;
    padding: 0;
}

/* =============================
========= 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;
    padding-top: 5px;
    padding-left: 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: 0;
    transition: 0.3s;
    transition: 0.3s;
    padding: 30px;
    padding-left: 5px;
    color: #A1B82B;
}

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

#topbar .social-links i{
    float: right;
    color: white;
    transition: 0.3s;
    padding-right: 5px;
}

#topbar .social-links i:hover{
    color: #909090;
    text-decoration: none;
    cursor: pointer;
}

Answer 1

您的社交媒体图标与其他所有内容不一致的原因是因为它们实际上低于。

看看这张图片：

如您所见，蓝色虚线是您的 .social-links div，它位于下方菜单中的其他项目。

为什么会这样？

发生这种情况的原因是因为默认情况下 div 有一个 display 属性 of block

display: block 表示该元素应另起一行，并占据其父元素的整个宽度。

所以，长话短说，要解决您的问题，您可以添加如下内容：

#topbar .social-links{
    float: right;
}

此代码将使您的 .social-links div 与菜单中的其他项目出现在同一行，并强制位于导航栏的右侧（我'我假设是你想要它的地方。）

现在图标位于菜单栏中，但它们固定在顶部。要解决这个问题，请删除这行代码：

#topbar .social-links i{
    /* float: right;  <-- REMOVE THIS */
    color: white;
    transition: 0.3s;
    padding-right: 5px;
}

附带说明一下，您似乎在 HTML 中使用了很多不需要的 class，如果您有 class，请尝试仅使用 class =64=] 为它写的:)

这是您网站的一个工作示例： https://codepen.io/jacobcambell/pen/zYzzrjW

希望对您有所帮助！

如何对齐网站上的图标 header？ (CSS + HTML)

How to align icons on website header? (CSS + HTML)

html

css

header