首页  >  文章  >  web前端  >  一级目录之间怎么有那么大的空隙?_html/css_WEB-ITnose

一级目录之间怎么有那么大的空隙?_html/css_WEB-ITnose

WBOY
WBOY原创
2016-06-24 11:51:111807浏览

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

附上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>


回复讨论(解决方案)

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>

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>


谢谢!
声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn