看似很简单的导航,仅仅就是几条边框,但是真正写起来却遇到了麻烦,导航的中间项边框会是双倍像素。在别人的帮助下,写出了两种解决方法,其实都是一样的,利用了margin-left负值。以下为两种方法代码。
第一种方法:利用padding-left将父级向右偏移几px,在子级下用margin-left负值向左偏移相同的几px。a元素hover的时候要提升层级。
css部分:
*{
margin: 0;
padding: 0;
}
.box{
width: 402px;
margin: 0 auto;
overflow: hidden;
}
.subBox{
padding-left: 2px;
}
.list{
float: left;
width: 98px;
border: 2px solid #333;
margin-left: -2px;
}
.list:hover{
position: relative;
z-index: 1;
border-color: #ff0000;
}
html部分:
<div class="box">
<div class="subBox">
<div class="list">导航第一项</div>
<div class="list">导航第二项</div>
<div class="list">导航第三项</div>
<div class="list">导航第四项</div>
</div>
</div>
第二种方法:直接将父级的每项利用margin-left负值向左偏移,同样a元素hover时要提升层级。
代码如下:
css部分:
ul,body{margin:0;padding:0;}
.list{width: 960px;
margin: 80px auto 0px;
}
li{list-style:none; float:left; margin-left:-2px;}
a{text-decoration:none;}
.list a{display:block;float:left;padding:0 16px;height:40px;line-height:40px;font-size:14px;color:#00f;position: relative;border:2px solid #f09;}
.list a:hover{border-color:#000;position: relative; z-index:1;}
html部分:
<ul class="list">
<li><a href="#">关于我们</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">如何购买</a></li>
<li><a href="#">下载中心</a></li>
<li><a href="#">联系我们</a></li>
</ul>