<%@ 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. 给python解释器本身添加注册表

    import sys from _winreg import * # tweak as necessary version = sys.version[:3] installpath = sys.pr ...

  2. SEH结构

    首先有几点问题 1.在后文中看到的PE的节中的配置信息表Load configuration是对SEH回调函数的注册,那么Exception Table是加载的什么信息. 2.什么时候走进系统异常,什 ...

  3. nyoj 206——矩形的个数——————【dp或公式】

    矩形的个数 时间限制:1000 ms  |  内存限制:65535 KB 难度:1   描述 在一个3*2的矩形中,可以找到6个1*1的矩形,4个2*1的矩形3个1*2的矩形,2个2*2的矩形,2个3 ...

  4. bzoj 3243: [Noi2013]向量内积

    Description 两个d 维向量A=[a1,a2,...,ad]与B=[b1,b2,...,bd]的内积为其相对应维度的权值的乘积和,即: 现有 n 个d 维向量x1,...,xn ,小喵喵想知 ...

  5. [转]Oracle ROWNUM用法和分页查询总结

    本文转自:http://blog.csdn.net/fw0124/article/details/42737671 ****************************************** ...

  6. 浅谈 .NET Framework 与 .NET Core 的区别与联系

    2017到了,咱们学点啥啊,要想知道学点啥,先弄清.NET Framework 与 .NET Core  这两个概念 .当今 net 生态系统如下: 从上面图中我们可以看到.net  主要分为三个部分 ...

  7. linq之Capacity（转载）

    出处:博客园 作者:mumuliang 连接:http://www.cnblogs.com/mumuliang/p/3914425.html Capacity 在.NET中List的容量应该只是受到硬 ...

  8. 实用的随机数生成类Random：测试（随机产生100个不重复的正整数）

    实用的随机数生成类Random:测试(使用Random类随机生成100个不重复的正整数) 一.之前我们使用随机数用的是Math类的random()方法: tips: 产生随机数(0~9中任意整数)的方 ...

  9. [LeetCode]21. Merge Two Sorted Lists合并两个有序链表

    Merge two sorted linked lists and return it as a new list. The new list should be made by splicing t ...

  10. 自己动手实现STL 01：内存配置器的实现(stl_alloc.h)

    一.前言 在STL中,容器是其中的重中之重,基本的STL中的算法,仿函数等都是围绕着容器实现的功能.而,内存配置器,是容器的实现的基础.所以,我第一次要去编写便是内存配置器的实现.在STL中,内存配置 ...