list-item盒模型

　　list-item模型可以将目标组件转换为类似于<ul.../>的列表元素，也可以同时在元素前面添加列表标志。如下页面将多个<div.../>元素的display设置为list-item。

例子
<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> list-item </title>
    <style type="text/css">
        /* 设置div以list-item的盒模型显示 */
        div{
            display: list-item;
            list-style-type: square;
            margin-left: 20px;
        }
    </style>
</head>  
<body>  
<div>疯狂Java讲义</div>  
<div>疯狂Android讲义</div>  
<div>轻量级Java EE企业应用实战</div>  
</body>  
</html>

实现多级列表

　　如果为不同元素添加不同的列表符号，并使用不同的margin-left，就可以通过list-item盒模型实现多级列表的效果。

例子
<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 多级列表 </title>
    <style type="text/css">
        body>div{
            display: list-item;
            list-style-type: disc ;
            margin-left: 20px;
        }
        div>div{
            display: list-item;
            list-style-type: square;
            margin-left: 40px;
        }
    </style>
</head>  
<body>  
<div id="div1">  
    疯狂Java体系图书
    <div>疯狂Java讲义</div>
    <div>疯狂Android讲义</div>
    <div>轻量级Java EE企业应用实战</div>
</div>  
<div id="div2">  
    疯狂Java相关
    <div>疯狂Java联盟</div>
    <div>疯狂软件教育</div>
    <div>疯狂Java实训营</div>
</div>  
</body>  
</html>

注：本博客内容节选自李刚编著的疯狂HTML 5/CSS 3/JavaScript讲义 ，详细内容请参阅书籍。