Html 橫排菜單不換行

先上效果:

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;

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章