<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <base href="<%=basePath%>"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script src="js/common/jquery-1.9.1.min.js" type="text/javascript"></script> <style type="text/css"> body{ margin: 0px; padding: 0px; background:url(../img/leftbj.gif) repeat-y; } ul li{ list-style: none; } #leftDiv{ width: 100%; overflow:hidden; display: block; height: 100%; margin-top: 32px; } #leftDiv ul li span{ font-size: 14px; background: url(../img/navbj01.jpg) no-repeat; height: 28px; display: inline-block; line-height: 28px; width: 100%; padding-left: 25px; color:white; } #leftDiv ul li{ margin-left: -40px; width: 207px; } #leftDiv ul li ul li{ line-height: 28px; height: 28px; width: 207px; background-color: #336f9c; border-bottom: 1px solid #4183b4; } #leftDiv ul li ul li a{ text-decoration:none; cursor:pointer; color: white; font-size: 13px; padding-left: 50px; } #leftDiv ul li ul li a:hover{ text-decoration:underline; } </style> <script type="text/javascript"> $(function(){ $("#leftDiv>ul>li>span").click(function(){ $(this).siblings("ul").toggle(); }); }); </script> </head> <body> <div id="leftDiv"> <ul> <li> <span>统计</span> <ul> <li><a href="customer/sum.do" target="mainFrame">统计</a></li> </ul> </li> <li> <span>数据维护</span> <ul> <li><a href="admin/list.do" target="mainFrame">管理</a></li> </ul> </li> </ul> </div> </body> </html>
上述通过设置span元素的行高、高度、宽度和 display 的inline-block可以让其填充整个span区间，这对于布局中的对齐（水平或垂直）很有作用，不用依赖table布局。