是否使用CSS将HTML (导航)类移动到容器类的顶部？
是否使用CSS将HTML (导航)类移动到容器类的顶部？
提问于 2018-07-20 04:18:01
我对HTML/CSS非常陌生。在我的导航栏/标题上，我似乎不能让".navleft“或".navright”移到".container“类的顶部(我的目标是将.nav类移到容器的顶部，这样我就可以在它们各自的.nav类中将文本居中，从而使它们在导航栏中居中)。我已经用白色突出显示了我正在讨论的空间。当我使用CSS来调整它们的高度和页边距时，它只会将页面上的部分向下拉。我还在这两个类中尝试了"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>回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-20 04:26:27
这将把导航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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51431080
复制相关文章
相似问题