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

回复讨论(解决方案)

首页

web前端

html教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:51 AM

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

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

热AI工具

热工具

热门话题

Java教程

1672

CakePHP 教程

1428

Laravel 教程

1332

PHP教程

1277

C# 教程

1257

显示更多

Related knowledge

HTML：结构，CSS：样式，JavaScript：行为 Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML，CSS和JavaScript的未来：网络开发趋势 Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。

HTML的未来：网络设计的发展和趋势 Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript：比较概述 Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

HTML与CSS和JavaScript：比较Web技术 Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术：1.HTML定义网页结构，2.CSS负责网页外观，3.JavaScript提供网页动态和交互性，它们共同作用，打造出用户体验良好的网站。

HTML：是编程语言还是其他？ Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。