html - header 与导航链接不在同一水平线上

Question

我已将图标标题从 mainHeader 下方移至其上方。之前没问题，但我喜欢 mainHeader 上方的图标标题，但我的导航中的链接在我的 mainHeader 下方。我尝试使用填充、边距和顶部，但它保持不变。这是我的 JSFiddle .我的 JSFiddle 与我实际的 HTML 和 CSS 略有不同，因为我的所有文件都在我的主目录中的一个文件夹中。这是我的 HTML 和 CSS:

HTML

<!--HEADER OF WEBSITE-->
            <!--Icon Header-->
            <div class="bottomHeader">
                <div id="icon-navwrap">
                    <ul id="icon-nav">
                        <li id="fb"><a href="#"><img src="Header/facebook.png" width="30px" height="30px"/></a></li>
                        <li><div id="mini-divider"></div></li>
                        <li id="yt"><a href="https://www.youtube.com/channel/UCjN6SKbr8ksAajUdcBJrFOQ"><img src="Header/youtube.png" width="30px" height="30px"/></a></li>
                        <li><div id="mini-divider"></div></li>
                        <li id="tt"><a href="https://twitter.com/clan_next_gen"><img src="Header/twitter.png" width="30px" height="30px"/></a></li>
                        <li><div id="mini-divider"></div></li>
                    </ul>
                </div>
            </div>
            <!--End of Icon Header-->

            <!--Main Header-->
            <div class="mH-clearfix">
            <!--Main Header Logo-->
                <div id="mainHeader">
                        <div id="header_logo">
                            <a href="file:///C:/Users/Swag/Desktop/My%20Website/Home/home.html"><div id="logo"><img src="Header/banner.png" alt="Logo" width="300"height="100"></a>
                        </div>
                    <!--End of Logo-->

                    <!--Main Header Links-->
                        <div id="nav-wrap">
                            <ul id="nav">
                                <li><a href="file:///C:/Users/Swag/Desktop/My%20Website/Roster/roster.html">Roster</a></li>
                                <li><a href="file:///C:/Users/Swag/Desktop/My%20Website/Gallery/gallery.html">Gallery</a></li>
                                <li><a href="file:///C:/Users/Swag/Desktop/My%20Website/Sponsors/sponsors.html">Sponsors</a></li>
                                <li><a href="file:///C:/Users/Swag/Desktop/My%20Website/About/about-us.html">About Us</a></li>
                            </ul>
                        </div>
                        <!--End of Main Header Links-->

                    </div>
                </div>
            </div>
            <!--End of Main Header-->
        </div>

CSS

/*=================
======= Body ======
=================*/

* { 
    margin: 0; padding: 0;
}

body {
    font-family: "Montserrat";
    font-size: 115%;
    background-image: url(background.png)
}

/*=======================
====== Header Logo ======
=======================*/

#mainHeader {
    background-color: #02236a;
}

.mH-clearfix {
    height: auto;
    width: 100%;
    content: "";
    clear: both;
}

#nav {
    margin-left: 25%;
}

/*==========================
======= Icon Header ======== 
==========================*/

.bottomHeader {
  background: #000b22;
  width: 100%;
  height: 30px;
  margin: 0 auto;
  position: absolute;
  margin: 0;
  overflow: hidden;
}

#icon-nav li {
    float: left;
    background-size: 50%;
    transition: background-color 0.5s ease;
}

#mini-divider {
    position: absolute;
    top: 1%;
    bottom: 1%;
    border-left: 1px solid white;
}

#fb:hover {
  background-color: #3f5c9a;
}

#yt:hover {
  background-color: #bd2826;
}

#tt:hover {
  background-color: #3f8dcb;
}


/*===============
====== Nav ======
===============*/

#nav {
    list-style: none;
}

#nav a {
    position: relative;
    color: #fff;
    text-decoration: none;
}

#nav li {
    float: left;
    margin-left: 50px;
    border-radius: 5px;
    line-height: 100px;
}

#nav a:hover {
    color: #fff;
}

#nav a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #fff;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: akk 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s
}

#nav a:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

/*============================
======= Miscellaneous ======== 
============================*/

a {
  text-decoration: none;
}

li {
  list-style: none;
}

Answer 1

可以解决您的样式问题:

1. 添加 margin-top: 30px; 和 display: inline-block; 到#logo
2. 将display: inline-block;添加到#nav-wrap
3. 从#nav 中移除 margin-left: 25%;

这应该修复 header 。