css块元素的 display 属性 inline-block 的应用

来源：互联网发布：logo字体发表软件编辑：程序博客网时间：2024/05/18 00:43

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

0 0