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;
}

然而，在将其从块更改为 inline 时，您的填充/高度看起来会有所不同。它们的关键点是在{30}的ul上设置一个高度，然后设置相同值的行高，即li上的30px。我还从此版本的overflow:auto中删除了ul因为它是多余的，因为div已经完成了这项工作。第二个例子：http://jsfiddle.net/LgKsY/1/

Answer 2

使用css display:inline-block;代替display:block，display:inline-block使用*float:left !important; /* For IE 7*/和_float:left !important; /* For IE 6*/。因为disaply:inline-block;不支持IE 6＆amp; 7。

另一种解决方案是，您可以使用float:left代替所有浏览器使用display:inline-block

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

2 个答案: