使用CSS将HTML（导航）类移动到容器类的顶部？
我对HTML/CSS非常陌生。在我的导航栏/标题上，我似乎无法使“.navleft”或“.navright”移动到“.container”类的顶部（我的目标是将.nav类移动到容器的顶部，这样我就可以将文本放在各自的.nav类的中心，进而将它们放在导航栏的中心）。我用白色突出显示了我正在谈论的空间。当我使用CSS来调整它们的高度和边距时，它只会使页面上的部分向下移动。我还在这两个类中尝试了“top:0”，但似乎什么也没做使用CSS将HTML（导航）类移动到容器类的顶部？,html,css,navigationbar,Html,Css,Navigationbar,我对HTML/CSS非常陌生。在我的导航栏/标题上，我似乎无法使“.navleft”或“.navright”移动到“.container”类的顶部（我的目标是将.nav类移动到容器的顶部，这样我就可以将文本放在各自的.nav类的中心，进而将它们放在导航栏的中心）。我用白色突出显示了我正在谈论的空间。当我使用CSS来调整它们的高度和边距时，它只会使页面上的部分向下移动。我还在这两个类中尝试了“top:0”，但似乎什么也没做 <!DOCTYPE html> <html> &l
<!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>
标题{
宽度：100vw；
高度：120px；
背景：#d0e5e2；
边框底部：实心4px#000000；
边框顶部：实心4px#000000；
位置：固定；
排名：0；
利润率：15px0；
字体大小：粗体；
字号：14pt；
}
#标志{
宽度：100px；
高度：100px；
文本对齐：居中；
保证金：自动；
}
.集装箱{
宽度：90vw；
保证金：0自动；
}
纳夫利特先生{
浮动：左；
文本对齐：底部对齐；
背景：#ffffff；
}
纳夫赖特先生{
浮动：对；
文本对齐：底部对齐；
背景：#ffffff；
}
纳瓦尔先生{
保证金：0；
填充：0；
排名：0；
}
纳维特{
保证金：0；
填充：0；
排名：0；
}
李先生{
显示：内联块；
左边距：10vw；
填充底部：60px；
}
李先生{
显示：内联块；
保证金权利：10vw；
填充底部：60px；
}
<!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>
标题{
宽度：100vw；
高度：120px；
背景：#d0e5e2；
边框底部：实心4px#000000；
边框顶部：实心4px#000000；
位置：固定；
排名：0；
利润率：15px0；
字体大小：粗体；
字号：14pt；
}
#标志{
宽度：100px；
高度：100px；
文本对齐：居中；
保证金：自动；
}
.集装箱{
宽度：90vw；
保证金：0自动；
}
纳夫利特先生{
浮动：左；
文本对齐：底部对齐；
背景：#ffffff；
}
纳夫赖特先生{
浮动：对；
文本对齐：底部对齐；
背景：#ffffff；
}
纳瓦尔先生{
保证金：0；
填充：0；
排名：0；
}
纳维特{
保证金：0；
填充：0；
排名：0；
}
李先生{
显示：内联块；
左边距：10vw；
填充底部：60px；
}
李先生{
显示：内联块；
保证金权利：10vw；
填充底部：60px；
}