如何使ul中li元素横向排列且不换行

最新推荐文章于 2021-08-04 09:17:41 发布

335046781

最新推荐文章于 2021-08-04 09:17:41 发布

阅读量1.2k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/liujiale/p/5258045.html

版权

外层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 
  >