代码: https://hastebin.com/otemiveduh.xml
问题描述:当导航栏的部分下方添加了另一个元素(如p-tag)时,有两个问题。它将隐藏在导航栏下方。此外,第二个错误是,当突出显示图像时,它不会改变整个高度的背景颜色,如果我更改了不同部分中的任何其他代码,则会破坏图像的垂直对齐。我一直坚持这个错误,并且必须转向社区寻求帮助。
<HTML>
<Head>
<style>
body {
margin: 0;
}
div.Header {}
div.Navigation {
padding: 0;
margin: 0;
list-style: none;
line-height: 50px;
height: 50px;
width: 100%;
background-color: #001a33;
position: absolute;
overflow: hidden;
z-index: 2;
flex-direction: row;
display: flex;
align-items: center;
justify-content: space-around;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
div.Navigation>a {
display: block;
flex-grow: 1;
text-align: center;
}
div.Navigation a img {
height: 22.1;
width: 44;
vertical-align: middle;
}
div.Navigation a:visited,
div.Navigation a:active,
div.Navigation a:link {
color: white;
text-decoration: none;
}
div.separator {
margin-left: 60%;
}
div.Navigation a:hover {
background-color: #000d1a;
}
</style>
</Head>
<Body>
<div class="Header">
<div class="Navigation">
<a href="#"><img src="icons/home-button.png" /></a>
<a href="#">Ongoing Projects</a>
<a href="#">Purchase Service</a>
<div class="separator"></div>
<a href="#">Employment</a>
<a href="#">Portfolio</a>
<a href="#">About</a>
</div>
</div>
<div class="Main">
</div>
<div class="Footer">
</div>
</Body>
</HTML>
答案 0 :(得分:0)
您在导航中使用绝对位置,因此您需要向主要内容添加填充,以便能够在不进入导航的情况下添加内容。您还有一个无用的元素可以在导航的两个部分之间进行分离。相反,您只需使用margin-left:auto
。
您还缺少图像高度/宽度的单位:
body {
margin: 0;
}
div.Navigation {
padding: 0;
margin: 0;
list-style: none;
line-height: 50px;
height: 50px;
width: 100%;
background-color: #001a33;
position: absolute;
overflow: hidden;
z-index: 2;
flex-direction: row;
display: flex;
align-items: center;
justify-content: space-around;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
div.Navigation>a {
display: block;
text-align: center;
padding:0 10px;
}
div.Navigation>a:nth-child(4) {
margin-left: auto;
}
div.Navigation a img {
height: 22.1px;
width: 44px;
vertical-align: middle;
}
div.Navigation a:visited,
div.Navigation a:active,
div.Navigation a:link {
color: white;
text-decoration: none;
}
div.Navigation a:hover {
background-color: #000d1a;
}
.Main {
padding-top:55px;
}
<div class="Header">
<div class="Navigation">
<a href="#"><img src="https://lorempixel.com/100/100/" /></a>
<a href="#">Ongoing Projects</a>
<a href="#">Purchase Service</a>
<a href="#">Employment</a>
<a href="#">Portfolio</a>
<a href="#">About</a>
</div>
</div>
<div class="Main">
<p>Content</p>
</div>
<div class="Footer">
</div>