导航菜单栏中的图标不会格式化答案

【问题标题】：Icons will not format in the navigation menu bar导航菜单栏中的图标不会格式化
【发布时间】：2017-02-25 08:46:23
【问题描述】：

我遇到了一个问题，即 Facebook 图标和 Instagram 图标在导航菜单栏中没有格式化，它就在它的下方，不会进入菜单栏。我需要图标位于导航栏的右侧，标题和图标之间有一些空间，但它们在中心排列在一起。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lunation Boards</title>
    <link rel = "icon" href="LogoBlack.PNG" type="image/SVG">
</head>
<style>
    body {margin:0;}
    .Header {
        z-index: 100;
        position: fixed;
        top: 0;
        width: 100%;
        background-color: #000000;
        height: 70px;
    }

    @media screen and (max-width:680px) {
        .Header.responsive {position: relative;}
        .Header.responsive li.icon {
            position: absolute;
            right: 0;
            top: 0;
        }
    }
    @media (max-width: 960px){
    .Header {
        position: relative;
        display: flex;
        width: 86px;
        height: 15px;
        margin: 0 auto;
    }
    }
    .headerLogo{
        text-align: center;
        font-size: small;
        font-style: italic;
        font-family: Verdana;
        color: white;
    }

</style>
<body>

<div class="Header" id="myHeader">
    <a class = "headerLogo">
        <a href="file:///C:/Noah's%20stuff/LunationBoards/Home.html" ><h1 style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
        text-align: center;">Lunation Boards</h1></a>
        <style>
            a{text-decoration: none}
        </style>
    </a>
    <a class = "Facebook" style = "padding-left: 1000px;">
        <img src = "facebook-3-xxl.png">
    </a>
    <a class = "Instagram" style = "padding-left: 30px">
        <img src = "instagram-32.png">
    </a>
</div>
</body>
<body>

【问题讨论】：

标签： html css formatting icons navigationbar

【解决方案1】：

我的意思是把样式放在头部之间，像这样

<head>
    <meta charset="UTF-8">
    <title>Lunation Boards</title>
    <link rel = "icon" href="LogoBlack.PNG" type="image/SVG">
<style>
    body {margin:0;}
    .Header {
        z-index: 100;
        position: fixed;
        top: 0;
        width: 100%;
        background-color: #000000;
        height: 70px;
    }

    @media screen and (max-width:680px) {
        .Header.responsive {position: relative;}
        .Header.responsive li.icon {
            position: absolute;
            right: 0;
            top: 0;
        }
    }
    @media (max-width: 960px){
    .Header {
        position: relative;
        display: flex;
        width: 86px;
        height: 15px;
        margin: 0 auto;
    }
    }
    .headerLogo{
        text-align: center;
        font-size: small;
        font-style: italic;
        font-family: Verdana;
        color: white;
    }

</style>
</head>
<body>

【讨论】：

它不会改变任何东西。

【解决方案2】：

您的风格必须在<head> 部分。

【讨论】：

它在
里面，它在样式标签中合并了导航菜单栏，所以两个图标都应该在菜单栏中。但事实并非如此。