UL嵌套使用執行個體——CSS定位

來源:互聯網
上載者:User

<!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>

 

(註:為方便複製查看,所有沒有使用插入代碼功能!)

 

 

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.