1. 程式人生 > >li浮動佈局,兩行兩列,其中有合併效果

li浮動佈局,兩行兩列,其中有合併效果

<!DOCTYPE htmlPUBLIC "-//W3C//DTDXHTML 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"

>    

        ul, li { list-style:none; padding:0; } 

        ul { width:500px; height:300px; margin:50 auto; background:#CCC }

        li {

            float:left;

            height:30px;

            line-height:30px;

            margin-left:10px;

            background:#E6E6E6;

            margin-bottom

:10px;

        }

        .li1 { width:240px; }

        .li2 { width:240px; height:70px; float:right;}

        .li3 { width:240px; }

        p { margin:10px auto; }

</style>

</head>

<body>

        <ul>

                <li class="li1">第一個li寬240px</li>

            <

li class="li2">第二個li寬240px</li>

            <li class="li3">第三個li寬240px</li>

        </ul>

        <p>li浮動,然後設定li寬度。上面兩個li加起來寬度小於ul寬度,三個li加起來寬度大於ul寬度</p>

</body>

</html>