html列表变成三个一行,html – 使列表始终在固定宽度div中显示一行元素

我正在努力使列表始终只在1行显示元素.

为了更好地理解这一点,让我先展示一些代码：

html结构是这样的：

CSS风格是这样的：

#tab-content{

overflow: auto;

height: 100%;

position:relative;

background-color: #373837;

color: white;

padding-left:20px;

padding-right:20px;

}

#tab-content ul{

display: block;

list-style: none outside none;

overflow: auto;

white-space: nowrap;

}

#tab-content ul li{

display: block;

float: left;

padding: 7px;

margin-right: 4px;

font-style: italic;

color: #cccccc;

}

我需要ul将其项目放在1行,无论它是否大于包含div.如果它确实变大,则应该出现滚动条.现在它只是被包裹..

我在#part-list上使用jscrollPane,因为我有一个自定义滚动条.

PS：指定比包含div更大的宽度,比如说150％,不是解决方案,因为列表的内容是从数据库中提取出来的,其长度是动态的.