创建列表始终在固定宽度div中显示一行元素

Question

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

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

html结构是这样的:

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

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%,不是解决方案,因为列表的内容是从数据库中提取出来的,其长度是动态的.

Answer 1

更改float:left到display:inline.实例:http://jsfiddle.net/LgKsY/

#tab-content ul li{
    display: inline;
    padding: 7px;
    margin-right: 4px;
    font-style: italic;
    color: #cccccc;
}

但是,在将其从块更改为内联时,填充/高度看起来会有所不同.它们键在这里设置一个高度ul,比如30px,然后是一个相同值的行高,即30px li.我也overflow:auto从ul这个版本中删除了,因为它div已经完成了这项工作.第二个例子:http://jsfiddle.net/LgKsY/1/