在IE里面没有问题，但链接内容在firefox里不能撑开显示。

在IE里面没有问题，但链接内容在firefox里不能撑开显示。求助。谢谢
<!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>
.menu{
margin:5px auto;
width:945px;
clear:both;
 }
    .menu_tit{
background:url(../images/menu_tit.gif);
width:945px;
height:27px;
line-height:27px;
font-size:13px;
}
.menu_tit img{
width:11px;
height:9px;
margin:9px;
float:left;
}
.menu_tit a{
padding-left:5px;
color:#06F;
}
.menu_detail{
width:923px;
border:1px solid #acc2f7;
border-top:0;
padding:10px;
}
#menu_detail1,#menu_detail2,#menu_detail3{display:block;}
.menu_detail a{
float:left;
color:#06f;
font-size:12px;
height:16px;
line-height:16px;
background:url(../images/li2.gif) no-repeat left center;
margin:5px 23px;
padding-left:14px;
}
.menu_detail a:hover{
color:#FF3300;
} .menu span{
color:#FF0000;
}</style>
<script language="javascript" type="text/javascript">
function Menu(i){
var d = document.getElementById("menu_detail"+i);
var b=document.getElementById("sp"+i);
if(d.style.display=="none"){
d.style.display="block";
b.innerHTML="[收缩]";
}
   else{
d.style.display="none";
b.src="../images/li4.gif";
b.innerHTML="[展开]";
}
}
</script>
</head><body>
<div id="Planer_table">
<div class="menu">
<div class="menu_tit"><img src="../images/li4.gif" /><a href="javascript:Menu(1);">GLOBE_PLANER  <span id="sp1">[收缩]</span></a>
</div>
<div id="menu_detail1" class="menu_detail">
<a href="">增加功能</a>
<a href="">删除功能</a>
<a href="">更新功能</a>
<a href="">查询功能</a>
<a href="">增加功能</a>
<a href="">删除功能</a>
<a href="">更新功能</a>
<a href="">查询功能</a>
</div>
</div>
<div class="menu">
<div class="menu_tit"><img src="../images/li4.gif" id="mlibtn2" /><a href="javascript:Menu(2);">GLOBE_PLANER  <span id="sp2">[收缩]</span></a>
</div>
<div id="menu_detail2" class="menu_detail">
<a href="">增加功能</a>
<a href="">删除功能</a>
<a href="">更新功能</a>
<a href="">查询功能</a>
<a href="">增加功能</a>
<a href="">删除功能</a>
<a href="">更新功能</a>
<a href="">查询功能</a>
<a href="">增加功能</a>
<a href="">删除功能</a>
<a href="">更新功能</a>
<a href="">查询功能</a>
</div>
</div>
<div class="menu">
<div class="menu_tit"><img src="../images/li4.gif"  id="mlibtn3"/><a href="javascript:Menu(3);">GLOBE_PLANER  <span id="sp3">[收缩]</span></a>
</div>
<div id="menu_detail3" class="menu_detail">
<a href="">增加功能</a>
<a href="">删除功能</a>
<a href="">更新功能</a>
<a href="">查询功能</a>
</div>
</div>
</div>
</body>
</html>

解决方案 »

  1.   

    .menu_detail a{
            float:left;
            color:#06f;
            font-size:12px;
            height:16px;
            line-height:16px;
            background:url(../images/li2.gif) no-repeat left center;
            margin:5px 23px;
            padding-left:14px;    
        }
    1、去除float:left
    2、清除float
      

  2.   

    谢谢。去除float：left可以解决我说的问题。但是会变成纵向排列的。我要横向排列的。怎么做
      

  3.   

    清除浮动啊，用了float以后，你在每个div结束之前用个标签如<br style="clear:both;">这样试试
      

  4.   

    .menu_detail{
            width:923px;
            border:1px solid #acc2f7;
            float: left;
            padding:10px;
            }