使用 CSS 将 HTML（导航）classes 移动到容器 class 的顶部？

Question

我对 HTML/CSS 很陌生。在我的导航 bar/header 中，我似乎无法将“.navleft”或“.navright”移动到“.container”class 的顶部（我的目标是移动 .nav classes 到容器的顶部，这样我就可以将文本居中放置在各自的 .nav classes 中，然后将它们居中放置在导航栏上）。我用白色突出显示了我正在谈论的 space。当我使用 CSS 调整它们的高度和边距时，它只会在页面上显示 down 部分。我也在两个 class 中尝试了 "top: 0;"，但似乎没有做任何事情。

<!DOCTYPE html>
<html>
<head>
<style>

header {
    width: 100vw;
    height: 120px;
    background: #d0e5e2;
    border-bottom: solid 4px #000000;
    border-top: solid 4px #000000;
    position: fixed;
    top: 0;
    margin: 15px 0 0 0; 
    font-weight: bold;
    font-size: 14pt;
}

#logo {
    width: 100px;
    height: 100px;
    text-align: center;
    margin: auto;
}

.container {
    width: 90vw;
    margin: 0 auto;
}

.navleft {
    float: left;
    text-align: bottom;
    background: #ffffff;
}

.navright {
    float: right;
    text-align: bottom;
    background: #ffffff;
}

.navleft ul {
    margin: 0;
    padding: 0;
    top: 0;
}

.navright ul {
    margin: 0;
    padding: 0;
    top: 0;
}

.navleft li {
    display: inline-block;
    margin-left: 10vw;
    padding-bottom: 60px;
}

.navright li {
    display: inline-block;
    margin-right: 10vw;
    padding-bottom: 60px;
}
</style>
</head>
<body>

<header>
        <div class = "container">
            <div id = "logo"><a href = "index.html"><img src = "assets/bg1.jpg" width = 120 height = 120 alt = "Home" title = "Home"></a></div>
            <div class = "navleft">
                <ul>
                    <li><a href = "#">NEWS</a></li>
                    <li><a href = "#">PORTFOLIO</a></li>
                </ul>
            </div>
            <div class = "navright">
                <ul>
                    <li><a href = "#">ABOUT US</a></li>
                    <li><a href = "#">FAQ</a></li>
                </ul>
            </div>
        </div>
    </header>

</body>
</html>

Answer 1

这会将导航 div 放在容器的顶部。

<!DOCTYPE html>
<html>
<head>
<style>

header {
    width: 100vw;
    height: 120px;
    background: #d0e5e2;
    border-bottom: solid 4px #000000;
    border-top: solid 4px #000000;
    position: fixed;
    top: 0;
    margin: 15px 0 0 0; 
    font-weight: bold;
    font-size: 14pt;
}

#logo {
    width: 100px;
    height: 100px;
    text-align: center;
    margin: auto;
}

.container {
    width: 90vw;
    margin: 0 auto;
}

.navleft {
    float: left;
    text-align: bottom;
    background: #ffffff;
}

.navright {
    float: right;
    text-align: bottom;
    background: #ffffff;
}

.navleft ul {
    margin: 0;
    padding: 0;
    top: 0;
}

.navright ul {
    margin: 0;
    padding: 0;
    top: 0;
}

.navleft li {
    display: inline-block;
    margin-left: 10vw;
    padding-bottom: 60px;
}

.navright li {
    display: inline-block;
    margin-right: 10vw;
    padding-bottom: 60px;
}
</style>
</head>
<body>

<header>
        <div class = "container">
            <div class = "navleft">
                <ul>
                    <li><a href = "#">NEWS</a></li>
                    <li><a href = "#">PORTFOLIO</a></li>
                </ul>
            </div>
            <div class = "navright">
                <ul>
                    <li><a href = "#">ABOUT US</a></li>
                    <li><a href = "#">FAQ</a></li>
                </ul>
            </div>
            <div id = "logo"><a href = "index.html"><img src = "assets/bg1.jpg" width = 120 height = 120 alt = "Home" title = "Home"></a></div>
        </div>
    </header>

</body>
</html>

使用 CSS 将 HTML（导航）classes 移动到容器 class 的顶部？

Move HTML (navigation) classes to top of container class with CSS?

html

css

navigationbar