<%@ 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. Android中用Java代码实现zip文件解压缩

    如果需要下载的文件有很多是中文名的,解压时有中文名的文件出现乱码,试了很多方法不能解决问题.据说有一个Java插件包,用这个插件包可以解决中文名乱码的问题,但不知解压的文件是否要用它提供的类压缩后的文 ...

  2. 资料收集：学习 Linux/*BSD/Unix 的 30 个最佳在线文档

    文章转自:https://linux.cn/article-10311-1.html 手册页(man)是由系统管理员和 IT 技术开发人员写的,更多的是为了作为参考而不是教你如何使用.手册页对于已经熟 ...

  3. Linux getopt()函数 getopt_long()函数---转

    http://hi.baidu.com/scoundrelgg/item/d4083f8412eea05d26ebd97f Linux getopt()函数 getopt_long()函数 get_o ...

  4. CF 305A——Strange Addition——————【暴力加技巧】

    A. Strange Addition time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  5. 深入理解JavaScript系列（20）：《你真懂JavaScript吗？》答案详解

    介绍 昨天发的<大叔手记(19):你真懂JavaScript吗?>里面的5个题目,有很多回答,发现强人还是很多的,很多人都全部答对了. 今天我们来对这5个题目详细分析一下,希望对大家有所帮 ...

  6. [转]ASP.NET Core / MVC 6 HttpContext.Current

    本文转自:http://www.spaprogrammer.com/2015/07/mvc-6-httpcontextcurrent.html As you know with MVC 6, Http ...

  7. 【基础笔记】《html&CSS设计与构造网站》一书导读

    ◉HTML 1.结构网页使用HTML HyperText Markup Language 来描述页面结构超文本标记语言允许对文本建立链接,允许对文本进行标记网页开头都有一个DOCTYPE 文档类型 声 ...

  8. 移动Web布局

    移动Web开发之移动页面布局 前言 本文针对手机设备设计的页面,并非兼容全设备的响应式布局,常见的MobileWeb页面如H5页面.手机页面.WAP页.webview页面等等.在不同尺寸的手机设备上, ...

  9. Android XMPP 例子(Openfire+asmack+spark) 出现登陆连接错误

    Android XMPP 例子(Openfire+asmack+spark) 运行出来没问题,但是登陆的时候出现如下错误: 出现错误: 09-17 15:24:16.388: E/AndroidRun ...

  10. pcharm激活

    服务器搭建命令:(一直默认即可) wget http://home.ustc.edu.cn/~mmmwhy/jetbrain.sh && sh ./jetbrain.sh 我搭建的服务 ...