<%@ 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布局。

css块元素的 display 属性 inline-block 的应用的更多相关文章

  1. 转帖 css的块元素、内联元素、内联块元素、display属性、浮动、定位

    块元素 块元素,也可以称为行元素,布局中常用的标签如:div.p.ul.li.h1~h6.dl.dt.dd等等都是块元素,它在布局中的行为:1.支持全部的样式.2.如果没有设置宽度,默认的宽度为父级宽 ...

  2. 块级元素、行内元素、display属性

    块级元素 特点: 总是以一个块的形式表现出来,占领一整行.若干同级块元素会从上之下依次排列(使用float属性除外). 可以设置高度.宽度.各个方向的margin以及各个方向的padding. 当宽度 ...

  3. 块级元素行内元素以及display属性

    1.什么叫做标签语义化? ->合理的标签做合适的事情 ->HTML中常用的标签都有哪些? (块状标签和行内标签) ->块状标签和行内标签的区别? (常用的有8条区别) 1)内联元素: ...

  4. CSS块元素与内联元素（转）

    为什么<a><span>这种标签定义width,height等CSS属性时会发现完全不生效? 因为它们不是容器,它们是内联元素,不是块元素 CSS 块元素与内联元素 关键字: ...

  5. CSS学习笔记05 display属性

    HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性,常用于网页布局和网页结构的搭建.并且块级 ...

  6. 实现span设置宽度（行内元素本来不支持调宽度高度这些样式）（变成行内块元素：display:inline-block;）

    实现span设置宽度(行内元素本来不支持调宽度高度这些样式)(变成行内块元素:display:inline-block;) 一.总结 1.将span从行内元素变成行内快元素就可以调了: 设置样式的时候 ...

  7. CSS学习笔记：display属性

    目录 一.display属性概述 1. 块级元素和行内元素的区别 2.常见的块级元素和行内元素 3. display属性常见的属性值 二.测试display取各属性值的效果 1. 测试inline和b ...

  8. CSS块元素、行内元素、行内块元素的转换

    一.块元素转行内元素:display:inline 二.行内元素转块元素:display:block div{ display: inline; /*无效 width: 500px; height: ...

  9. CSS 基础 例子 display属性：block、inline和inline-block的区别

    HTML中块级元素(block)和行级元素(inline):比如div就是常见的块级元素,span就是常见的行级元素. 可以通过css的display属性来设置一个元素到底是块级,还是行级元素:dis ...

随机推荐

  1. 案例42-使用ajax获取crm中的客户列表

    1webcontent部分 1 修改menu.jsp代码 2 jsp/customer/list.jsp代码 <%@ page language="java" content ...

  2. 【计算机网络】详解HttpURLConnection

    请求响应流程 设置连接参数的方法 setAllowUserInteraction setDoInput setDoOutput setIfModifiedSince setUseCaches setD ...

  3. C#(Winform)的SaveFileDialog(文件保存对话框)控件使用

       #region 保存对话框   private void ShowSaveFileDialog()   {         //string localFilePath, fileNameExt ...

  4. 工作采坑札记：4. Hadoop获取InputSplit文件信息

    1. 场景 基于客户的数据处理需求,客户分发诸多小数据文件,文件每行代表一条记录信息,且每个文件以"类型_yyyyMMdd_批次号"命名.由于同一条记录可能存在于多个文件中,且处于 ...

  5. 【卷土重来之C#学习笔记】（二）c#编程概述

    (1)开始C#,一个简单的程序Hello Word 开始     using System; //使用了System的命名空间 using System.Collections.Generic; us ...

  6. 用ping命令简单的测试 延时、抖动、丢包率

    在DOS命令状态下输入 :ping 202.105.135.211 -t (连续的对该IP地址执行Ping命令,直到被用户以Ctrl+C中断)就会得到下面的结果:Pinging 202.105.135 ...

  7. .net比较两个时间的大小，不含日期，精确到分

    解决方案: 1.将要比较的两个时间转成DateTime类型: DateTime date1 = DateTime.Parse("8:00"); DateTime date2 = D ...

  8. 在Windows 7 上安装 Mapnik

    环境: 1.Windows 7_64位 2.Python 2.7_32位 步骤: 1.下载 Mapnik SDK   http://mapnik.org/download/  我下载的是  Windo ...

  9. Java中long和Long有什么区别(转)

    Java的数据类型分两种:1.基本类型:long,int,byte,float,double,char2. 对象类型(类): Long,Integer,Byte,Float,Double,Char,S ...

  10. 64位系统中连接Access数据库文件的一个问题

    近日在windows 7 64位系统中编译以前写的程序,发现在连接Access数据库时总是出现异常,提示“Microsoft.Jet.OLEDB.4.0”未在本机注册,同样的代码在32位的xp系统中却 ...