Rumah > hujung hadapan web > html tutorial > 一级目录之间怎么有那么大的空隙?_html/css_WEB-ITnose

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Lepaskan: 2016-06-24 11:51:11
asal
1848 orang telah melayarinya

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

附上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>
Salin selepas log masuk


回复讨论(解决方案)

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>
Salin selepas log masuk
Salin selepas log masuk

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>
Salin selepas log masuk
Salin selepas log masuk


谢谢!
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan