一级目录之间怎么有那么大的空隙？

亚细亚 2015-01-05 01:59:00

点击一级目录中的“用户管理”，展开二级目录，发现二级目录最后一项与“系统管理”之间有一大截距离，请问这是怎么回事？如同：

附上HTML代码



<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>leftwindow</title>

<style type=text/css>

#baseInfoManager

{

  width:180px;

  height:100px; 

 

}

#baseInfoManager p

{

 height:30px;

 text-indent:20px;

 

}

#baseInfoManager p a

{

   display:block;

   height:100%;

   width:100%;

   text-decoration:none; 

   line-height:30px;

   font-family:Arial, Helvetica, sans-serif;

   font-size:12px;

}

#baseInfoManager p a:hover{

   height:100%;

   width:100%;

   color:#000; 

   text-decoration:none; 

   background:#dce7f0;

}



#baseInfoManager ul

{

   	margin-top:1px;

 	width:100%;

 	height:100%;

}

#baseInfoManager ul li

{

 	width:180px;

 	height:30px;

 	list-style:none;

 	line-height:30px;

 	text-indent:40px;

 

}

#baseInfoManager ul li a

{

   float:left;

   width:180px;

   height:30px;

   text-decoration:none; 

   font-family:Arial, Helvetica, sans-serif;

   font-size:12px; 

}

#baseInfoManager ul li a:hover{

  width:180px;

  height:30px;

  color:#000; 

  text-decoration:none; 

  background:#dce7f0;

}

</style>

<SCRIPT language="javascript">

 window.onload=function()

 {

     var obtn=document.getElementById('btn');

     var oul=document.getElementById('ul1');

     obtn.onclick=function()

  {

 

   if(oul.style.display=='block')

   {

    oul.style.display='none';

   }

   else

   {

    oul.style.display='block';

   }

  }

    

 };

</SCRIPT>

</head>



<body bgcolor="#f3f8fc">

 



 <div id="baseInfoManager">

 

 <p id="btn"><a href="#" onClick="showSubMenu(1)">用户管理</a></p>

 <ul id="ul1" style="display:none;">

    <li><a href="#" >aaa</a></li>

    <li><a href="#" >bbb</a></li>

 </ul>

 

 <p id="btn1"><a href="#" onClick="showSubMenu(2)">系统管理</a></p>

 <ul id="ul2" style="display:none;">

 	<li>ccc </li>

 	<li>ddd </li>

 </ul>

 </div>

 

</body>

</html>

...全文

381 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

亚细亚 2015-01-05

打赏
举报

引用 1 楼 slwsss 的回复:

margin

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>leftwindow</title>
<style type=text/css>
  *{margin: 0px;padding:0px;}
#baseInfoManager
{
  width:180px;
  height:100px; 
  
}
#baseInfoManager p
{
 height:30px;
 text-indent:20px;
  clear:both;
}
#baseInfoManager p a
{
   display:block;
   height:100%;
   width:100%;
   text-decoration:none; 
   line-height:30px;
   font-family:Arial, Helvetica, sans-serif;
   font-size:12px;
}
#baseInfoManager p a:hover{
   height:100%;
   width:100%;
   color:#000; 
   text-decoration:none; 
   background:#dce7f0;
}
 
#baseInfoManager ul
{
       margin-top:1px;
     width:100%;
}
#baseInfoManager ul li
{
     width:180px;
     list-style:none;
     line-height:30px;
     text-indent:40px;
  
}
#baseInfoManager ul li a
{
   float:left;
   width:180px;
   text-decoration:none; 
   font-family:Arial, Helvetica, sans-serif;
   font-size:12px; 
}
#baseInfoManager ul li a:hover{
  width:180px;
  color:#000; 
  text-decoration:none; 
  background:#dce7f0;
}
</style>
<SCRIPT language="javascript">
 window.onload=function()
 {
     var obtn=document.getElementById('btn');
     var oul=document.getElementById('ul1');
     obtn.onclick=function()
  {
  
   if(oul.style.display=='block')
   {
    oul.style.display='none';
   }
   else
   {
    oul.style.display='block';
   }
  }
     
 };
</SCRIPT>
</head>
 
<body bgcolor="#f3f8fc">
  
 
 <div id="baseInfoManager">
  
 <p id="btn"><a href="#" onClick="showSubMenu(1)">用户管理</a></p>
 <ul id="ul1" style="display:none;">
    <li><a href="#" >aaa</a></li>
    <li><a href="#" >bbb</a></li>
 </ul>
  
 <p id="btn1"><a href="#" onClick="showSubMenu(2)">系统管理</a></p>
 <ul id="ul2" style="display:none;">
     <li>ccc </li>
     <li>ddd </li>
 </ul>
 </div>
  
</body>
</html>

谢谢！

slwsss 2015-01-05

打赏
举报

margin

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>leftwindow</title>
<style type=text/css>
  *{margin: 0px;padding:0px;}
#baseInfoManager
{
  width:180px;
  height:100px; 
  
}
#baseInfoManager p
{
 height:30px;
 text-indent:20px;
  clear:both;
}
#baseInfoManager p a
{
   display:block;
   height:100%;
   width:100%;
   text-decoration:none; 
   line-height:30px;
   font-family:Arial, Helvetica, sans-serif;
   font-size:12px;
}
#baseInfoManager p a:hover{
   height:100%;
   width:100%;
   color:#000; 
   text-decoration:none; 
   background:#dce7f0;
}
 
#baseInfoManager ul
{
       margin-top:1px;
     width:100%;
}
#baseInfoManager ul li
{
     width:180px;
     list-style:none;
     line-height:30px;
     text-indent:40px;
  
}
#baseInfoManager ul li a
{
   float:left;
   width:180px;
   text-decoration:none; 
   font-family:Arial, Helvetica, sans-serif;
   font-size:12px; 
}
#baseInfoManager ul li a:hover{
  width:180px;
  color:#000; 
  text-decoration:none; 
  background:#dce7f0;
}
</style>
<SCRIPT language="javascript">
 window.onload=function()
 {
     var obtn=document.getElementById('btn');
     var oul=document.getElementById('ul1');
     obtn.onclick=function()
  {
  
   if(oul.style.display=='block')
   {
    oul.style.display='none';
   }
   else
   {
    oul.style.display='block';
   }
  }
     
 };
</SCRIPT>
</head>
 
<body bgcolor="#f3f8fc">
  
 
 <div id="baseInfoManager">
  
 <p id="btn"><a href="#" onClick="showSubMenu(1)">用户管理</a></p>
 <ul id="ul1" style="display:none;">
    <li><a href="#" >aaa</a></li>
    <li><a href="#" >bbb</a></li>
 </ul>
  
 <p id="btn1"><a href="#" onClick="showSubMenu(2)">系统管理</a></p>
 <ul id="ul2" style="display:none;">
     <li>ccc </li>
     <li>ddd </li>
 </ul>
 </div>
  
</body>
</html>