UL嵌套使用实例——CSS定位

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">   
    *{
        font-family: "Courier New", Courier, monospace;
        font-size: 12px;
        }
       
    /*设置外面项目列表的风格*/   
    #price{   
        list-style:none;
        }
   
    /*设置嵌套在里面的项目列表的风格*/
    #price li ul{
        margin:0;
        padding:0;
        border:0;
        list-style-type:none;
        }   
   
    #price li{
        position:relative;       
        }      
   
    /*设置项目列表头部的公共样式(字体)*/
    #price li span.caption{
        font-size:16px;
        font-weight:bold;
        }
   
    #price li span.left{   
        left:0px;
        }
   
    #price li span.right{
        position:absolute;
        left:120px;
        top:0;
        }
   
   
</style>
</head>

<body>
<ul id="price">
    <li><span class="caption left">AAA</span><span class="caption right">AAAAAAA</span>
        <ul>
            <li><span class="left">li_row1_left</span><span class="right">l_r_r1</span></li>
            <li><span class="left">li_r2_l</span><span class="right">li_r_row2</span></li>
            <li><span class="left">li_row3_left</span><span class="right">li_r_r3</span></li>
        </ul>
    </li>   
</ul>
</body>
</html>

 

(注:为方便复制查看,所有没有使用插入代码功能!)

效果图:

 

 

你可能感兴趣的:(html,css,XHTML,Class,文档,border)