<%@ 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. TCP-Java--图谱

  2. sublime的reopen with encoding和reload with encoding区别

    首先必需要明白一点,sublime无论以什么编码格式打开文本(以什么编码格式来理解文本文件中的二进制数据),都会把它转为utf-8再显示到屏幕中,这个过程称作解码.其实不当当是sublime,其实任何 ...

  3. HRBUST 1161——Leyni——————【线段树单点更新，区间查询】

    Leyni Time Limit: 3000 MS Memory Limit: 65536 KB 64-bit integer IO format: %lld , %llu Java class na ...

  4. D3(v5) in TypeScript 坐标轴之 scaleBand用法

    在学习d3时候,发现在TS中实现D3的坐标轴中遇到一些错误,而这些错误却不会存在于js(因为ts的类型检查)写法中,因此做下笔记: import * as d3 from 'd3';import * ...

  5. Python快速入门_1

    注释 # 用#号字符开头注释单行 """ 三个引号可以注释多行 三个引号可以注释多行 三个引号可以注释多行 """ 原始数据类型和运算符 ( ...

  6. PCU

    PCU(Peak concurrent users ),互联网术语,应用在网络游戏和其他互联网服务领域,意思是最高同时在线人数 业务系统架构性能提升主要分为两种不同的方式,scale-out(横向扩展 ...

  7. 深入理解JavaScript系列（21）：S.O.L.I.D五大原则之接口隔离原则ISP

    前言 本章我们要讲解的是S.O.L.I.D五大原则JavaScript语言实现的第4篇,接口隔离原则ISP(The Interface Segregation Principle). 英文原文:htt ...

  8. Android开发过程中部分报错解决方法。

    初学Android,最近在使用zxing开发一个条码扫描解析的安卓项目中,遇到以下几个问题.贴出来以供参考. 1.Http请求错误    Android4.0以上要求不能把网络请求的操作放在主线程里操 ...

  9. H5 中html 页面存为图片并长按 保存

    最近接到的一个新需求:页面一个静态H5,中间有一页是输入信息,然后跳转到最后一页,自动将页面生成图片,用户可以长按图片保存到手机上. 展示一下最后一页的样子: 刚拿到这个需求,在网上看了很多文章,最普 ...

  10. mogondb简介

    MongoDB是一款强大.灵活,且易扩展的通用型数据库,其包含以下设计特点 1.1易于使用 与关系型数据库不同的是,它没有table/rows/records,相反采用更为灵活的文档(document ...