我的列表模式顯示第一行4個，第二行兩個，不是兩行各三個，為什么
這是代碼：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標(biāo)題文檔</title>
<style type="text/css">
? ?*{margin:0;padding:0;}
? ?ul,li{list-style:none;}
? ?body{font:"微軟雅黑";font-size:16px;}
? ?#box{border:1px solid #aaa;height:auto;width:70%;margin:0 auto;overflow:hidden;}
? ?.top{height:40px;}
? ?.top a{height:16px; width:16px;display:block;float:right;margin:5px;}
? ? ? .btn-list-off{ background:#fff url( http://img1.sycdn.imooc.com//53ab7e86000153cc00710057.jpg) no-repeat -38px 0px;}?
.btn-car-on{background:#fff url(http://img1.sycdn.imooc.com//53ab7e86000153cc00710057.jpg) no-repeat -21px -34px;}
.btn-list-on{background:#fff url(http://img1.sycdn.imooc.com//53ab7e86000153cc00710057.jpg) no-repeat -21px 0px;}
.btn-car-off{background:#fff url(http://img1.sycdn.imooc.com//53ab7e86000153cc00710057.jpg) no-repeat -38px -32px;}
? ??
? li{float:left;margin:8px;border:1px solid #aaa}
? p{line-height:20px;}
? span{display:block;}
? .bottom{background:#ccc;height:35px;text-align:center;line-height:35px;}
? .small{height:50px;width:50px;float:left;margin:5px;}
</style>
<script>
window.onload=function(){
? ?var list=document.getElementById("btn1")
? ?var car=document.getElementById("btn2")
? ?var imgs=document.getElementsByTagName("img")
? ?list.onclick=function(){
? ? ? ?list.className="btn-list-on"
? ? ? ?car.className="btn-car-off";
? ? ? ?for(i=0;i<imgs.length;i++){
? ? ? ? ? ?imgs[i].src=" http://img1.sycdn.imooc.com//53ab7cf4000196c000500050.jpg"
? ? imgs[i].parentNode.className="a-img small"
? ? ? ?}
? ?}
? ?car.onclick=function(){
? ? ? ?car.className="btn-car-on"
? ? ? ?list.className="btn-list-off"
? ? ? ?for(j=0;j<imgs.length;j++){
? ? ? ? ? ?imgs[j].src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"
? ? ? ? ? ?imgs[j].parentNode.className="a-img"
? ? ? ?}
? ?}
}
</script>
</head>
<body>
<div id="box">
<div class="top">
<a href="#" title="列表模式" id="btn1" class="btn-list-off"></a>
<a href="#" title="卡片模式" id="btn2" class="btn-car-on"></a>
</div>
<ul>
<li>
<div class="con">
<a href="#" class=" a-img">
<img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg" />
</a>
<p>
<a href="#">白陽</a>
<span>遼寧</span>
<span>21個共同好友</span>
</p>?
</div>
<div class="bottom">
未分組的好友
</div>
</li>
?
<li>
<div class="con">
<a href="#" class="a-img">
<img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/>
</a>
<p>
<a href="#">白陽</a>
<span>遼寧</span>
<span>21個共同好友</span>
</p>?
</div>
<div class="bottom">
未分組的好友
</div>
</li><li>
<div class="con">
<a href="#" class="a-img">
<img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/>
</a>
<p>
<a href="#">白陽</a>
<span>遼寧</span>
<span>21個共同好友</span>
</p>?
</div>
<div class="bottom">
未分組的好友
</div>
</li>
<li>
<div class="con">
<a href="#" class="a-img">
<img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/>
</a>
<p>
<a href="#">白陽</a>
<span>遼寧</span>
<span>21個共同好友</span>
</p>?
</div>
<div class="bottom">
未分組的好友
</div>
</li><li>
<div class="con">
<a href="#" class="a-img">
<img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/>
</a>
<p>
<a href="#">白陽</a>
<span>遼寧</span>
<span>21個共同好友</span>
</p>?
</div>
<div class="bottom">
未分組的好友
</div>
</li><li>
<div class="con">
<a href="#" class="a-img">
<img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/>
</a>
<p>
<a href="#">白陽</a>
<span>遼寧</span>
<span>21個共同好友</span>
</p>?
</div>
<div class="bottom">
未分組的好友
</div>
</li>
</ul>
</div>
</body>
</html>
2015-09-18
li的樣式是float的，所以你的父容器的寬度能放下4個li時，4個就會在一排，如果你把父容器的寬度變小一點，只能放下3個時，第4個就會被擠到第二排去了