<%@ 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. tomcat修改jvm内存

    内存大小:-Xms256M -Xmx512M -XX:PermSize=256m -XX:MaxNewSize=256m -XX:MaxPermSize=512m -Djava.awt.headles ...

  2. maven pom.xml指定jdk

    <plugins> <!-- 指定jdk --> <plugin> <groupId>org.apache.maven.plugins</grou ...

  3. 深入理解JavaScript系列（17）：面向对象编程之概论

    介绍 在本篇文章,我们考虑在ECMAScript中的面向对象编程的各个方面(虽然以前在许多文章中已经讨论过这个话题).我们将更多地从理论方面看这些问题. 特别是,我们会考虑对象的创建算法,对象(包括基 ...

  4. 阿里云服务器Linux常用命令

    系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS ...

  5. Vue2.0+Node.js+MongoDB全栈打造商城系统

    vue.js +axios mock数据 在main.js中 import axios from 'axios' Vue.prototype.$ajax = axios webpack.dev.con ...

  6. onload与ready差异

    window.onload: 等所有资源加载完document.ready: DOM树构建完资源还没加载完 应该使用ready保证用户体验.否则当网站有很多图片资源时要很长时间才能加载完这段时间内Js ...

  7. Oracle数据库错误消息

    Oracle数据库错误消息 导出错误消息 l EXP-00000导出终止失败 原因:导出时产生Oracle错误. 操作:检查相应的Oracle错误消息. l EXP-00001数据域被截断 - 列长度 ...

  8. Android java获取凌晨的时间戳

    这两天有一个需求是查询用户匹配的推荐信息,包含一个有效时间段,以天为单位,0时0分0秒这种. 通常java中有两种方案: 第一种:Calendar.这种比较简单,也最常见.代码如下: Calendar ...

  9. TextView来实现跑马灯的效果

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  10. oracle查询所有用户表的表名、主键名称、索引、外键等

    1.查找表的所有索引(包括索引名,类型,构成列): select t.*,i.index_type from user_ind_columns t,user_indexes i where t.ind ...