css 导航条问题

发布网友发布时间：2024-10-04 09:23

共2个回答

热心网友时间：2024-10-21 11:07

我已经调试出来了，经过谷歌、火狐、IE6-9（IE Tester）等浏览器测试，没有问题的，先贴出解决代码，下面详细给你说思路。

html（你把下面代码放入你的页面）：

<ul id="nav">
<li class="active"><a href="#">HOME</a></li>
<li><a href="#">LATEST ARRIVALS</a></li>
<li><a href="#">MEN'S </a></li>
<li><a href="#">WOMEN'S</a></li>
<li><a href="#">KIDS</a></li>
<li><a href="#">BRANDS</a></li>
<li><a href="#">SALE</a></li>
<li><a href="#">GIFT CARDS </a></li>
<li><a href="#">FREEBIES</a></li>
</ul>

<ul id="nav2">
<li class="active"><a href="#">HOME</a></li>
<li><a href="#">LATEST ARRIVALS</a></li>
<li><a href="#">MEN'S </a></li>
<li><a href="#">WOMEN'S</a></li>
<li><a href="#">KIDS</a></li>
<li><a href="#">BRANDS</a></li>
<li><a href="#">SALE</a></li>
<li><a href="#">GIFT CARDS </a></li>
<li><a href="#">FREEBIES</a></li>
</ul>

<ul id="nav3">
<li><a href="#">HOME</a></li>
<li><a href="#">LATEST ARRIVALS</a></li>
<li><a href="#">MEN'S</a></li>
<li><a href="#">WOMEN'S</a></li>
<li><a href="#">KIDS</a></li>
<li><a href="#">BRANDS</a></li>
<li><a href="#">SALE</a></li>
<li><a href="#">GIFT CARDS</a></li>
<li><a href="#">FREEBIES</a></li>
</ul>

CSS：

/* 楼主自己写的样式 */
#nav{width:960px;height:36px;margin:0 auto;padding-top:8px; border:1px solid #fff;}
#nav li{float:left;height:28px;margin-right:5px;}
#nav a{float:left;height:28px;color:#fff;font-size:15px;line-height:28px; background:#fff;background:url(../images/nav_bg.png) no-repeat;}
#nav strong{float:left;height:28px; font-weight:normal;background:url(../images/nav_bg.png) no-repeat right -28px;}
#nav span{float:left;height:28px;padding:0 16px;margin:0 4px;background:url(../images/nav_bg.png) repeat-x 0 -56px;}

/* 本人对楼主样式的优化 */
#nav2 { width:960px; height:36px; margin:20px auto; padding-top:8px; border:1px solid #fff;}
#nav2 li { float:left; height:28px; margin-right:5px;}
#nav2 a { float:left; display:block; height:28px; background:url(../images/nav_bg.png) no-repeat; color:#fff; font:15px/28px "宋体"; padding-left:4px;}
#nav2 strong { float:left; display:block; height:28px; background:url(../images/nav_bg.png) no-repeat right -28px; font-weight:normal; padding-right:4px;}
#nav2 span { float:left; display:block; height:28px; background:url(../images/nav_bg.png) repeat-x 0 -56px; padding:0 16px;}

/* 本人推荐的导航写法，这是其样式 */
#nav3 { width:960px; height:28px; padding:8px 0; margin:20px auto; border:1px solid #fff;}
#nav3 li { float:left; height:28px; width:auto; margin-right:5px;}
#nav3 li a{ float:left; display:block; height:28px; color:#fff; font:15px/28px "宋体"; border:0px solid #fff;}
#nav3 li a span.left { float:left; display:block; height:28px; width:4px; background:url(../images/nav_bg.png) no-repeat;}
#nav3 li a span.cont { float:left; display:block; height:28px; padding:0 16px; background:url(../images/nav_bg.png) 0 -56px;}
#nav3 li a span.right{ float:left; display:block; height:28px; width:4px; background:url(../images/nav_bg.png) right -28px;}

------------------------------------------ 华丽丽的分割线 ------------------------------------------------------

楼主的这种导航好像叫做滑动门导航吧，导航宽度可以根据内容自适应。
但是楼主的 html 关系嵌套的不太合适，CSS也不好操作，我推荐使用 #nav3，这也是从书上学的，代码虽长，但是嵌套关系与并列关系非常明确，各自负责的功能也很明确。

楼主说的出现缝隙的问题只在 IE 6 中出现过，其他浏览器正常，这说明这是 IE 6 的本身问题了，我不知道该怎么解释，不好意思。

.

热心网友时间：2024-10-21 11:06

你给ul或者li都设置一下margin:0;padding:0; list-style-type:none;
如果需要另外加这两个属性的话，那就单独针对一个方向加好了例如padding-left:20px;