时间戳

首页 > 解决方案 > 如何对齐网站标题上的图标？（CSS + HTML）

html - 如何对齐网站标题上的图标？（CSS + HTML）

问题描述

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

我已经尝试了一些想法，我目前正在制作这个顶部标题（“topbar”），它充当实际标题上方的迷你标题，显示一些额外的信息。

不幸的是，我有点编码新手，我无法弄清楚这段代码出了什么问题。如果你运行它，你会看到右侧的社交媒体图标（我使用的是 Font Awesome）不在标题中，尝试将它们放在那里很痛苦。它们应该与左侧的元素一致（就高度而言，顶栏的中间，从右侧向内 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>

代码：

/* ==============================
========== 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;
}

标签： htmlcssheader

解决方案

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

看看这张图片：

在此处输入图像描述

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

为什么会这样？

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

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 中使用了很多不需要的类，如果你为它编写了实际的 CSS，试着只使用一个类:)

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

希望这有帮助！

推荐阅读