如何使ul中li元素橫向排列且不換行


外層div容器寬度固定,ul寬度隨li(li寬度固定)的增加而撐開,但是當ul中li的寬度之和大於div時,ul沒有撐開,而是li換行了,如何使li不換行?

解決方法:主要是外面容器設置為white-space:nowrap;li設置為display:inline-block;而不是float:left;

<!DOCTYPE html>
< html >
< head >
< style >
 
#pic_list
{
display:block;
white-space:nowrap;
width:500px;
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 >


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM