Html 生成列表始终在固定宽度的div中显示一行元素

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

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

html结构如下所示：

<div id="tab-content">
 <div id="part-list">
    <ul>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
    </ul>
  </div>
</div>

#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将其项目放在一行上，无论它是否大于包含的div。如果它确实大于滚动条应显示的值。现在它只是被包装起来

我在#部件列表上使用jscrollPane，因为我在那里有一个自定义滚动条

---

PS：指定一个比包含的div更大的宽度（比如150%）不是一个解决方案，因为列表的内容是从db中拉出的，其长度是动态的。

使用css

显示：内联块

而不是

display:block

，使用

display:inline block

使用

*float:left！重要；/*对于IE 7*/

和

\u float:左！重要；/*对于IE 6*/

。因为

禁用：内联块不支持IE 6和7

另一种解决方案是，您可以对所有浏览器使用
float:left
，而不是使用
display:inline block
将
float:left
更改为
display:inline
。实例：

然而，将其从“块”更改为“内联”时，填充/高度似乎有所不同。此处的键是在
ul
上设置一个高度，例如30px，然后在
li
上设置一个相同值的行高度，即30px。我还从这个版本的
ul
中删除了
overflow:auto
，因为它是多余的，因为
div
已经完成了这个工作。第二个例子：
非常感谢，你帮我省下了很多咖啡和香烟！我已经将前面的答案标记为已接受，但您的答案也有效，是一个完整的解决方案。我希望任何读过这篇文章的人都会一直读下去，因为你的解决方案才是我真正想要的。
#tab-content ul li{
    display: inline;
    padding: 7px;
    margin-right: 4px;
    font-style: italic;
    color: #cccccc;
}