1.完整顯示
2. 不完整顯示
代碼:
<!DOCTYPE html>
<html>
<head>
<style>
#pic_list
{
display:block;
white-space:nowrap;
width:100%;
overflow:auto;
}
#pic_list li
{
width:80px;
height:80px;
margin:3px;
background:red;
display:inline-block;
}
</style>
</head>
<div id="pic_list">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
總結:
一句話就是將去掉
float:left;
改成
display:inline-block;