Heim > Artikel > Web-Frontend > 一级目录之间怎么有那么大的空隙？_html/css_WEB-ITnose
一级目录之间怎么有那么大的空隙？_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:51:111806Durchsuche
点击一级目录中的“用户管理”，展开二级目录，发现二级目录最后一项与“系统管理”之间有一大截距离，请问这是怎么回事？如同：
附上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> 谢谢！
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：CSS条件注释_html/css_WEB-ITnoseNächster Artikel：漏网之鱼HTML&CSS_html/css_WEB-ITnose