我想创建像http://oi61.tinypic.com/345g7wz.jpg
这样的导航菜单但我发现了一些问题。 li背景颜色未连接,并且在IE
中显示不同这是我的代码http://codepen.io/anon/pen/HdzIf
HTML:
<body>
<header>
<div class="logo"></div>
<nav>
<ul>
<li><a href="index.html" class="active">Home</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="cupcakes.html">Cupcakes</a></li>
<li class="empty"></li>
<li><a href="how-to-order.html">How to Order</a></li>
<li><a href="contact-us.html">Contact us</a></li>
<li><a href="faq.html">FAQ</a></li>
</ul>
</nav>
<div class="line"></div>
</header>
</body>
CSS:
body {
width: 960px;
margin: 0 auto;
}
header {
margin: 60px 0 40px;
}
.logo {
height: 162px;
width: 162px;
background-color: #9BD1AF;
position: absolute;
top: 5px;
left: 50%;
margin-left: -81px;
z-index: 1;
-webkit-border-radius: 80px;
-moz-border-radius: 80px;
border-radius: 80px;
}
.line {
width: 100%;
height: 10px;
top: 6px;
position: relative;
background-color: #7E5A3A;
}
nav {
width: 100%;
text-transform: uppercase;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
nav ul li {
display: inline;
background: #2D4C4E;
padding: 10px 20px;
}
nav ul li.empty {
padding: 10px 59px;
}
nav ul li a {
padding: 3px 10px;
color: #F9EEC6;
background: #2D4C4E;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-decoration: none;
}
nav ul li a:hover {
background-color: #7E5A3A;
color: #FFF;
}
我在http://jsfiddle.net/g8SsP/发布代码后再次发现新问题 当浏览器的尺寸缩小时,徽标不是我想要的
答案 0 :(得分:0)
.logo {
height: 162px;
width: 162px;
background-color: #9BD1AF;
position: absolute;
top: 5px;
left: 50%;
margin-left: -81px;
z-index: 1;
-webkit-border-radius: 80px;
-moz-border-radius: 80px;
border-radius: 80px;
}
将其更改为:
.logo {
height: 162px;
width: 162px;
background-color: #9BD1AF;
position: relative;
top:68px;
left: 48%;
margin-left: -81px;
z-index: 1;
-webkit-border-radius: 80px;
-moz-border-radius: 80px;
border-radius: 80px;
}
以上是徽标始终存在! 现在,列表项之间的空格消失了:
nav ul li {
display: inline;
background: #2D4C4E;
padding: 10px 20px;
margin-right:-7px;
}
给负边缘带来正确的问题。