带水平滚动条的无序列表

Question

我希望有一个UL列表，但其元素向左浮动，列表具有固定的高度和宽度。

我现在拥有的：

ul { 
width: 230px;
height: 30px;
overflow-x: scroll;
}

li { 
float: left;
display: inline 
}

HTML：

<ul id="dev">
  <li>el</li>
  <li>el</li>
</ul>

元素浮动正常，但滚动条不起作用（灰色），元素将转到新行。我该怎么办？

Answer 1

在列表中将white-space属性设置为nowrap，然后在列表元素上禁用float: left。

ul { 
  /* ... */
  white-space: nowrap;
}

li { 
  display: inline;
}

Answer 2

ul {
    width: 230px;
    height: 30px;
    overflow-x: scroll;
    white-space: nowrap;
}

li {
    display: inline-block;
}