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布局。

posted @ 2013-11-21 10:06  若 ♂ 只如初见  阅读(284)  评论(0)  编辑  收藏  举报