gpt4 book ai didi

html - 如何让我的 Logo 在导航栏中居中?

转载 作者:太空宇宙 更新时间:2023-11-04 08:37:09 26 4
gpt4 key购买 nike

如何使我的 Logo 在导航栏中居中?我有点已经把它居中了,但我遇到的问题是当我在内容区域放置图像时,图像覆盖了部分 Logo 。我确实希望 Logo 从导航链接中稍微掉落一点。我不想在 Logo 和内容图像之间留出巨大的空间。有什么办法可以做到这一点?所附图片是我要完成的设计。提前致谢!

body {  
font-family:Georgia;
font-size:12pt;
}

* {
margin:0;
padding:0;
}

#header {
background-color:#000000;
height:100px;
margin:auto;
}

#header ul {
margin:0 auto;
width:35%;
padding:12px;
list-style: none;
}

#header li {
float: left;
}

#header a {
padding:0 14px;
text-align:center;
display:block;
text-decoration:none;
color:#FFFFFF;
font-size:18pt;
}

#header ul li a.logo {
background: url("Logo.png");
background-repeat:no-repeat;
height:140px;
display:block;
width:140px;
padding: 0;


.clearfix {
*zoom: 1;
}

.clearfix:after {
content: "";
clear: both;
display: table;
}

#MainContent {
}

#MainContent img {
margin-top:-10px;
position:absolute;
left:0;
width:100%;
}

}
<body>
<div id="header" class="clearfix">

<ul class="Nav">
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="index.html" class="logo"></a></li>
<li><a href="gallery.html" >Gallery</a></li>
<li><a href="about.html">About</a></li>

</ul>

</div>
<div id="MainContent">
<img src="Photos/drinks.jpeg">
</div>
</body>


最佳答案

您可以将 z-index 添加到您的 .logo 类中。这会将其呈现在图像上方。

例如

.logo {
z-index: 100;
}

https://developer.mozilla.org/de/docs/Web/CSS/z-index

关于html - 如何让我的 Logo 在导航栏中居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44378489/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com