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
}
.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="li3">第三個li寬240px</li>
</ul>
<p>li浮動,然後設定li寬度。上面兩個li加起來寬度小於ul寬度,三個li加起來寬度大於ul寬度</p>
</body>
</html>