为什么这里的标志在底部有轻微的重叠？下面给出了 CSS 和 HTML。我已经尝试覆盖与 Logo 相关的 css 属性 <li>元素。但它没有用。
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<ul id="nav">
<li><a href="#">WORK</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
<li class="logo">
<a href="#" style="padding:0;">
<img src="logo.png" />
</a>
</li>
</ul>
</div>
</body>
</html>
CSS
body {
margin: 0;
}
#nav {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav li {
width: 20%;
float: right;
text-align: center;
}
#nav li a {
display: block;
padding: 0.5em 5px;
text-decoration: none;
font-weight: bold;
color: #F2F2F2;
-webkit-box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
}
#nav a:link, #nav a:visited {
background-color: #071726;
}
#nav a:hover, #nav a:active, #nav a:focus {
background-color: #326773;
}
最佳答案
取决于您要实现的目标。
#nav {
list-style-type: none;
margin: 0;
padding: 0;
-webkit-box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
background: #000;
float: left;
width: 100%;
}
#nav li {
margin: 0;
padding: 0;
width: 19%;
text-align: center;
display: inline-block;
float: right;
}
#nav li a {
display: block;
padding: 0.5em 5px;
text-decoration: none;
font-weight: bold;
color: #F2F2F2;
}
#nav a:link, #nav a:visited {
}
#nav a:hover, #nav a:active, #nav a:focus {
background-color: #326773;
}
这样一来，您就可以根据需要调整 Logo 的大小。菜单项可能 float 在 div 之外。在那种情况下，您要么需要 float 父对象，要么用溢出隐藏父对象，要么清除 float 对象。
重构 我重构了一些东西，例如父级的投影和背景颜色。这允许大部分效果依赖于父 div 而不是单个元素。不过，我只是在这里假设。你有你想要的东西的photoshop模型吗？让我们更好地了解您对 CSS 的需求。
关于css - Logo 在 css 中重叠？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19130099/