css块元素的 display 属性 inline-block 的应用
<%@ 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 的应用的更多相关文章
- 转帖 css的块元素、内联元素、内联块元素、display属性、浮动、定位
块元素 块元素,也可以称为行元素,布局中常用的标签如:div.p.ul.li.h1~h6.dl.dt.dd等等都是块元素,它在布局中的行为:1.支持全部的样式.2.如果没有设置宽度,默认的宽度为父级宽 ...
- 块级元素、行内元素、display属性
块级元素 特点: 总是以一个块的形式表现出来,占领一整行.若干同级块元素会从上之下依次排列(使用float属性除外). 可以设置高度.宽度.各个方向的margin以及各个方向的padding. 当宽度 ...
- 块级元素行内元素以及display属性
1.什么叫做标签语义化? ->合理的标签做合适的事情 ->HTML中常用的标签都有哪些? (块状标签和行内标签) ->块状标签和行内标签的区别? (常用的有8条区别) 1)内联元素: ...
- CSS块元素与内联元素（转）
为什么<a><span>这种标签定义width,height等CSS属性时会发现完全不生效? 因为它们不是容器,它们是内联元素,不是块元素 CSS 块元素与内联元素 关键字: ...
- CSS学习笔记05 display属性
HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性,常用于网页布局和网页结构的搭建.并且块级 ...
- 实现span设置宽度（行内元素本来不支持调宽度高度这些样式）（变成行内块元素：display:inline-block;）
实现span设置宽度(行内元素本来不支持调宽度高度这些样式)(变成行内块元素:display:inline-block;) 一.总结 1.将span从行内元素变成行内快元素就可以调了: 设置样式的时候 ...
- CSS学习笔记：display属性
目录 一.display属性概述 1. 块级元素和行内元素的区别 2.常见的块级元素和行内元素 3. display属性常见的属性值 二.测试display取各属性值的效果 1. 测试inline和b ...
- CSS块元素、行内元素、行内块元素的转换
一.块元素转行内元素:display:inline 二.行内元素转块元素:display:block div{ display: inline; /*无效 width: 500px; height: ...
- CSS 基础 例子 display属性：block、inline和inline-block的区别
HTML中块级元素(block)和行级元素(inline):比如div就是常见的块级元素,span就是常见的行级元素. 可以通过css的display属性来设置一个元素到底是块级,还是行级元素:dis ...
随机推荐
- Django 入门项目案例开发（上）
关注微信公众号:FocusBI 查看更多文章:加QQ群:808774277 获取学习资料和一起探讨问题. Django 入门案例开发(中) http://www.cnblogs.com/focusBI ...
- TerraBuilder创建地形之去除影像黑边，填充影像
最近在Skyline项目中使用TerraBuilder创建地形,由于地形比较大,分块下载卫星影像,然后再TerraBuilder中合并,由于合并.图形等等问题,导致创建处理出来的地形中存在严重的缝隙和 ...
- 【VMware】VMware的安装和更改虚拟机默认存储路径
1.VMware Workstation 14中文破解版安装 网盘下载链接:https://pan.baidu.com/s/1pbDXpgpNQTdTRzzKNWfE1A linux镜像(CentOS ...
- initBinder转换日期格式
@Controller public class FirstController { @RequestMapping("/first") //类型转化工作一定是在真正的handle ...
- Spring课程 Spring入门篇 4-7 Spring bean装配之基于java的容器注解说明--@Scope 控制bean的单例和多例
1 解析 1.1 bean的单例和多例的应用场景 1.2 单例多例的验证方式 1.3 @Scope注解单例多例应用 2 代码演练 2.1 @Scope代码应用 1 解析 1.1 bean的单例和多例的 ...
- git的commit规范及强制校验
1.背景 在多人协作项目中,如果代码风格统一.代码提交信息的说明准确,那么在后期协作以及Bug处理时会更加方便. 先来介绍本人公司采用的commit规范 Commit message格式 < ...
- 从零开始的全栈工程师——html篇1
全栈工程师也可以叫web 前端 H5主要是网站 app 小程序 公众号这一块 HTML篇 html(超文本标记语言,标记通用标记语言下的一个应用.) “超文本”就是指页面内可以包含图片.链接,甚至音乐 ...
- 纯CSS实现Tab切换标签效果代码
在线演示地址如下: http://demo.jb51.net/js/2015/css-tab-bq-style-cha-codes/ <!DOCTYPE html PUBLIC "-/ ...
- Aligning Plots in a Column作图列对齐
Plot[Sin[x], {x, 0, Pi}] Plot[10000 Sin[x], {x, 0, Pi}] 直接作图左边无法对齐,影响图的美观.可以使用左边界空格实现列对齐,代码如下: optio ...
- sparkpython
http://blog.csdn.net/ydq1206/article/details/51922148