将导航栏放在logo上的最佳方式是使其恰好在“g”之下?将Navbar放在Logo上并在缩放时保持位置
即使在浏览器被调整大小和不同的屏幕尺寸时,它也需要保持该位置,并且不会影响下面的内容。
徽标图像缩小到适合屏幕。
浏览器缩小
https://jsfiddle.net/jypwoaet/
HTML
<div class="container">
<div id="logo">
<img src="https://i.imgur.com/3SBvB3a.jpg">
</div>
<div id="nav">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Gallery
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
CSS
.container {
max-width: 960px;
margin: auto auto;
}
#logo {
z-index: 1;
max-width: 650px;
margin: 2em auto;
}
#logo img {
display: block;
max-width: 100%;
max-height: 100%;
text-align: center;
}
#nav {
z-index: 2;
position: relative;
display: block;
width: 100%;
min-width: 400px;
height: 50px;
margin: -12vh auto;
text-align: center;
background: gray;
}
#nav ul li {
display: inline-block;
padding: 1em;
}
添加此的margin-top:1px的;到#nav并给出一个尝试 –