打印

[求助] 导航条的一个清除浮动问题，问原因

loveface [楼主]

老吃不饱

银牌会员

帖子: 620
体力: 1779
威望: 1
当前: 上海浦东

1^# 大中小发表于 2008-5-11 15:02

想让两条导航条上下显示，把UL{}里加一句,float:left;clear:left;就好了。否则两条导航条总在一行显示，请问一下原因？
还有一个困惑是在IE7和FF下，窗口变小时，出现的界面情况不一样。FF还好。IE7下把下一行都给挤得不行了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
ul{
list-style:none;
margin:0;
float:left;
clear:left;
}
.navGroup li{
float:left;
text-align:center;
background-color:#7d7d7d;
}
.navGroup li a{
display:block;
color:#FFFFFF;
text-decoration:none;
text-align:center;
padding:4px 15px 1px 15px;
margin:0;
}
.navGroup li a:hover{
color:#ccff66;
}
#nav1,#nav2{
background-color:#7d7d7d;
border-top:1px solid #a5a5a5;
}
#nav1 a:hover{
background-color:#727272;
}
#nav2 a:hover{
background-color:#393939;
}
</style>
</head>
<body>
<div>
<ul id="nav1" class="navGroup">
    <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>
    <li><a href="#">学堂</a></li>
    <li><a href="#">交流论坛</a></li>
</ul>
<ul id="nav2" class="navGroup">
    <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>
    <li><a href="#">学堂</a></li>
    <li><a href="#">交流论坛</a></li>
</ul>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

[ 本帖最后由 loveface 于 2008-5-11 15:18 编辑 ]

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

不要浮躁

TOP

做西部数码代理.Cn1元国际45元 | 将虚拟化进行到底

cwgaotaku

新手上路

帖子: 10
体力: 26
威望: 0
当前: 北京朝阳区
离线: 126 天

2^# 大中小发表于 2008-5-11 16:35

没有设置ul的width导致的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
ul{
width:600px;
list-style:none;
margin:0;
float:left;
}
.navGroup li{
float:left;
text-align:center;
background-color:#7d7d7d;
}
.navGroup li a{
display:block;
color:#FFFFFF;
text-decoration:none;
text-align:center;
padding:4px 15px 1px 15px;
margin:0;
}
.navGroup li a:hover{
color:#ccff66;
}
#nav1,#nav2{
background-color:#7d7d7d;
border-top:1px solid #a5a5a5;
}
#nav1 a:hover{
background-color:#727272;
}
#nav2 a:hover{
background-color:#393939;
}
</style>
</head>
<body>
<div>
<ul id="nav1" class="navGroup">
    <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>
    <li><a href="#">学堂</a></li>
    <li><a href="#">交流论坛</a></li>
</ul>
<ul id="nav2" class="navGroup">
    <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>
    <li><a href="#">学堂</a></li>
    <li><a href="#">交流论坛</a></li>
</ul>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

我在FF下测试不加clear:left也可以实现

TOP

美橙vps独立IP月付189元

Elking

中级会员

帖子: 170
体力: 339
威望: 0
当前: 广东广州

3^# 大中小发表于 2008-5-11 16:54

因为你的UL 没有宽高!!就像水袋一样让浏览器挤了!!

TOP

请大家尊重和保护奥运知识产权。

loveface [楼主]

老吃不饱

银牌会员

帖子: 620
体力: 1779
威望: 1
当前: 上海浦东

4^# 大中小发表于 2008-5-11 21:21

回2楼，如果设定了UL的宽度，就不需要这句了：float:left;
不过我还是比较好奇，如果不设宽度，而是加了float:left;clear:left;为什么也会分两行显示。是什么原理呢

不要浮躁

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

Elking

中级会员

帖子: 170
体力: 339
威望: 0
当前: 广东广州

5^# 大中小发表于 2008-5-11 22:38

..你既然会用clear 应该知道它的含义！

TOP

zidanezhicong

我爱阿仙奴

高级会员

帖子: 447
体力: 895
威望: 0
当前: 广东深圳
离线: 1 天

专长 前端制作

6^# 大中小发表于 2008-5-12 09:06

你使用了clear:left;第二个导航条就会清除它左边的浮动元素，然后独占一行

我爱阿仙奴！

TOP