如何使ul中li元素横向排列且不换行_html/css_WEB-ITnose

情况如上图所示：
外层div容器宽度固定，ul宽度随li（li宽度固定）的增加而撑开，但是当ul中li的宽度之和大于div时，ul没有撑开，而是li换行了，如何使li不换行？
ul样式如下：
#pic_list
{
display:inline;
white-space: nowrap;
}
li样式如下：
#pic_list li
{
width:80px;
height:80px;
margin:3px;
float:left;
background:red;
display:block;
}
补充说明：即使我将ul的宽度设置为大于div容器宽度的固定值，但是li依然会在div容器的边缘之前换行。
经过研究，应该是float惹的祸，w3cschool的资料如此描述“浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止”，我认为li在浮动时并没有碰到ul的框，而是碰到了ul的父容器div的框，但是依然会换行。

回复讨论(解决方案)

去掉
float:left;
改成
display:inline-block;

去掉
float:left;
改成
display:inline-block;

谢谢您的回答，效果非常理想。

你的滚动效果是怎么实现的，我在网上看了几个，都是把ul的position设置成absolute，滚动图片的时候，就修改left属性；

但是我设置ul为absolute时，加入到ul中的图片都不显示出来。。。
不设置absolute ，然后修改left，又不知道怎么做？

去掉
float:left;
改成
display:inline-block;

找了半天问题，终于解决了，谢谢。

具体怎么解决的啊，为什么我的还是不行

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%> 	 		   				
   			
 				
主页
            		 		
工作日志
            		 		
设备运行记录
            		 		
其他
		 		
导航1
				
导航2
				
导航3
				
导航4
				
导航5
				
导航6
				
导航7
				
导航8
				
导航9
				
导航10
				
导航11
				
导航12
				
导航13
				
导航14
				
导航15
				
导航16
				
导航17
				
导航18
				
导航19